Skip to content

Latest commit

 

History

History
223 lines (167 loc) · 6.6 KB

README.zh-CN.md

File metadata and controls

223 lines (167 loc) · 6.6 KB

@flypeng/lint-config

@flypeng/eslint-config @flypeng/stylelint-config

English | 简体中文

  • 单引号，半角
  • 共享 ESLint 和 Stylelint 配置
  • 基于 Airbnb 的代码校验
  • 基于 Prettier 的代码格式化
  • ESLint Flat Config，轻松编写
  • 易于集成、配置和自定义规则

📦 软件包

  • @flypeng/eslint-config
    • @flypeng/eslint-config-basic
    • @flypeng/eslint-config-javascript
    • @flypeng/eslint-config-typescript
    • @flypeng/eslint-config-vue
    • @flypeng/eslint-config-react
    • @flypeng/eslint-config-other
  • @flypeng/stylelint-config

🏃 集成

安装软件包

pnpm add eslint stylelint prettier @flypeng/eslint-config @flypeng/stylelint-config -D`

配置.eslintrc或eslint.js、.stylelintrc。

.eslintrc (ESLint < 9 && Disable eslint new configuration)

{
  "extends": "@flypeng/eslint-config"
}

eslint.config.js (ESLint > 9 && Enable eslint new configuration)

使用 ESM

  • "type": "module" in package.json
// eslint.config.js
import flypeng from '@flypeng/eslint-config';

export default flypeng();

使用 CJS

// eslint.config.js
const flypeng = require('@flypeng/eslint-config').default;

module.exports = flypeng();

.stylelintrc

{
  "extends": "@flypeng/stylelint-config"
}

配置 .prettierrc 和 `.prettierignore

{
  "semi": true,
  "singleQuote": true,
  "bracketSpacing": true,
  "printWidth": 120,
  "vueIndentScriptAndStyle": false
}
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
**/*.yaml

配置脚本

{
  "scripts": {
    "lint": "prettier . --write && eslint . && stylelint \"**/*.{css,scss,vue}\"",
    "lint:fix": "prettier . --write && eslint . --fix && stylelint --fix \"**/*.{css,scss,sass,vue}\""
  }
}

配置 VSCode 设置

安装 VSCode ESLint、Stylelint、Prettier、Prettier ESLint 插件并创建.vscode/settings.json。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.enable": true,
  "eslint.experimental.useFlatConfig": true, // 启用ESLint新的配置系统
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "jsx",
    "tsx",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "json5",
    "yaml"
  ],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "less", "scss", "sass", "vue", "postcss"]
}

配置 `.editorconfig

在团队开发中，.editorconfig 的配置是必要的，以确保团队编辑器的行为风格一致。

# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org

root = true

[*]

# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Change these settings to your own preference
indent_style = space
indent_size = 4

[*.{ts,tsx,js,jsx,json,css,scss,yml,yaml,html,vue,md}]
indent_size = 2

[*.md]
trim_trailing_whitespace = false

VSCode 扩展

🏍️ 重写规则

如果需要重写规则，很可能需要指定文件范围，因为除 @flypeng/eslint-config-javascript 以外的软件包所使用的规则都是针对特定文件的插件。如果不声明文件范围，就会出现意外错误。

示例

// eslint.config.js
import flypeng from '@flypeng/eslint-config';

export default [
  ...flypeng(),
  {
    /**
     * If you do not declare the file Scope, other files will also refer to this rule.
     * But the rules of other files do not use the @ typescript-eslint/eslint-plugin plugin, so an error will be reported during Lint.
     * Reference detail: https://github.com/eslint/eslint/issues/17485
     */
    files: ['**/*.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
];

✍️ 关于使用 Prettier

网上有很多关于使用 Prettier 进行代码格式化的讨论，的确，Prettier 格式化的某些方面有些强制性，导致代码的可读性较差，或者不是你喜欢的代码风格。

其中一篇由 Anthony Fu 撰写的 Why I don't use Prettier 接受了 Prettier 不适用的原因。看看他怎么说。

我为什么要在 @flypeng/eslint-config 中启用 Prettier 来处理代码格式？

我主要考虑了两点：

首先，如果你是个人开发者，而且你对整个项目的代码风格有很好的把握，你可以考虑不使用 Prettier，但如果你是团队开发者，你不能保证你的代码风格会被其他团队成员接受，而且会导致整个项目的代码风格五花八门。因此，这时你应该考虑使用 Prettier 来强制统一代码风格。

第二：ESLint 的主要职责是验证代码而非代码格式，因此对于简单的校验和自动修复可以在一定程度上起到启迪格式化的作用。但对于整体项目的代码风格 ESLint 并不能保证，Prettier 的主要职责是统一整体风格。

基于以上两点，我决定开放使用 Prettier。

⚙️ 关于 V1 到 V2

V2 是对 V1 的重构，以适应 ESLint 的扁平化配置，并使用 Prettier 作为代码格式化工具。

如果您需要调整 ESLint 的扁平化配置，那么您在内部使用的所有软件包都需要使用新版本的扁平化配置。幸运的是，ESLint 提供了一个适配方案 eslintrc，用于将旧配置转换为新配置。