@me-tool/eslint-prettier-ts-config v1.0.0

References

内容主要是来自下面的地址结合自身工作习惯

1. https://github.com/airbnb/javascript
2. https://github.dev/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base
3. https://github.com/scdt-china/eslint-config-scc
4. https://zhuanlan.zhihu.com/p/366141969
5. https://www.npmjs.com/package/eslint-prettier-config
6. https://www.jianshu.com/p/2d6550a83f06 (ESLint 你可能不知道的知识点)
7. https://typescript-eslint.io/rules/
8. https://github.com/import-js/eslint-plugin-import
9. http://eslint.cn/docs/user-guide/configuring
10. https://zhuanlan.zhihu.com/p/386373956

项目说明

包含常用的 JS/TS + Node 以及 VUE 的规则验证 使用 eslint-config-standard 就没有使用 eslint-config-airbnb-base

eslint-config-standard 可以和 standard 对比看看

Compare the Top 3 Style Guides and Set Them Up With ESLint

Package.json Dependencies

index.js Extends

extends 属性值可以省略包名的前缀 eslint-config-, 比如 eslint-config-standard 可以直接写为 extends:['standard']

VSCode

VSCode Extension

为了统一代码格式规范，以及提升代码可读性，推荐安装如下插件 下面插件安装均可以在 VScode 自身的插件管理中找到

编辑器配置，必须

1. Prettier
2. ESLint
3. EditorConfig for VS Code

辅助检查，建议

1. Code Spell Checker
2. Error Lens
3. indent-rainbow
4. TSLint(如果不使用 TS 可以不安装)

VScode Settings

这里直接贴出对应的属性，可以在 setting 的图形化界面中显示

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript, javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
    // 会覆盖掉全局的设置
    // 可以针对语言设置不同的  brackets
    // "editor.language.brackets": [],
    // 可以指定 brackets 自定义颜色，因为默认 brackets 颜色是不开启的
    // "editor.language.colorizedBracketPairs": []
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json, jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  // 以下是和 airbnb 的 eslint 保持一致
  "prettier.arrowParens": "always", // 箭头函数如果只有一个参数，添加括号
  "prettier.endOfLine": "lf",
  "prettier.ignorePath": ".prettierignore",
  "prettier.jsxSingleQuote": true,
  "prettier.printWidth": 100,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  // 行尾逗号,默认none,可选 none|es5|all
  // es5 包括es5中的数组、对象
  // all 包括函数对象等所有可选
  "prettier.trailingComma": "all",
  "prettier.useEditorConfig": false,
  "prettier.useTabs": false // 插入空格而不是 tab
}

如何使用该项目

项目中安装必要依赖

yarn add @me-tool/eslint-prettier-ts-config --save-dev

#
yarn add eslint prettier husky lint-staged --save-dev

项目使用引用

ESLint

在项目的根目录下，创建 .eslintrc.js 文件

module.exports = {
  extends: ['@me-tool/eslint-prettier-config'],
  parserOptions: {
    project: './tsconfig.json', // 如果不是 TS 项目可以忽略
  },
  rules: {
    // 自定义规则
  },
};

配置完成之后可以使用如下代码检查是否正确应用

npx eslint --print-config any_js_file

Prettier

配置文件格式优先级, Prettier 使用 cosmiconfig 支持配置文件

cosmiconfig 是一种常用的配置文件读取工具，按照下述顺序沿文件树寻找配置文件，找到则停止

当同一个目录下有多个不同格式的配置文件时，Prettier 只会使用一个。

Notice: 该项目使用 .prettierrc.js 只是为了更好的标注注释

Prettier 会按照以下优先级（从高到低）读取：

package.json 中的 `prettier` 字段
.prettierrc YAML 或 JSON 格式
  .prettierrc.json
  .prettierrc.yaml
.prettierrc.yml
.prettierrc.js
.prettier.config.js
.prettierrc.toml

在 package.json 中添加 prettier 字段

{
  // ...
 "prettier": "@me-tool/eslint-prettier-ts-config/.prettierrc.js",
}

husky

husky 主流是 4.\* 和 6.\* 两个版本，在 https://zhuanlan.zhihu.com/p/366786798 中有说明具体的区别和使用方式，这里只阐述 6.\* 的配置

# 使用 husky 进行初始化
npx husky install

# 添加 git hooks，运行一下命令创建 git hooks
npx husky add .husky/pre-commit "npm run lint"

lint-staged

package.json

{
  "scripts": {
    "lint": "lint-staged"
  },
  "lint-staged": {
    "*.ts": ["prettier --write", "eslint --fix", "git add"],
    "*.js": ["prettier --write", "eslint --cache --fix", "git add"],
    "*.vue": ["prettier --write", "eslint --cache --fix", "git add"],
    "*.{json,md,yml,css}": ["prettier --write", "git add"]
  }
}

Feature

自动注入相应配置特别是 editor-config，这个应该放入到 @me-tool/cli 中

Tips

如何处理 ESLint 和 Prettier 的冲突问题

内容参考 https://juejin.cn/post/7012160233061482532

让 eslint 只负责代码质量检测而让 prettier 负责美化呢: eslint-config-prettier + eslint-plugin-prettier

1. eslint-config-prettier 的作用是关闭 eslint 中与 prettier 相互冲突的规则。
2. eslint-plugin-prettier 的作用是赋予 eslint 用 prettier 格式化代码的能力。

// 安装依赖
yarn add eslint-config-prettier eslint-plugin-prettier -D

// .eslintrc
{
   // 其余的配置
 - "extends": ["eslint:recommended", "standard"]
 + "extends": ["eslint:recommended", "standard",  "plugin:prettier/recommended"]
  // 其余的配置
}

关键在于新增加的 plugin:prettier/recommended 这个规则。让我们看看它具体做了什么

// node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js
module.exports = {
  // plugin:prettier/recommended 就是加载这个
  configs: {
    recommended: {
      extends: ['prettier'],
      plugins: ['prettier'],
      rules: {
        'prettier/prettier': 'error',
        'arrow-body-style': 'off',
        'prefer-arrow-callback': 'off',
      },
    },
  },
  // 其他的
};

plugin:prettier/recommended 这个语法就是加载了 node_modules/eslint-plugin-prettier/eslint-plugin-prettier.js 文件导出的 configs 中的 recommended 配置项。下面解析他们分别做了什么。

1. extends: ['prettier']: 通过 eslint-config-prettier 关闭 eslint 和 prettier 相冲突的规则。
2. plugins: ['prettier']: 加载 eslint-plugin-prettier，赋予 eslint 用 prettier 格式化文档的功能
3. 'prettier/prettier': 'error': 让代码文件中不符合 prettier 格式化规则的都标记为错误，结合 vscode-eslint 插件便可以看到这些错误被标记为红色，当运行 eslint --fix 命令时，将自动修复这些错误。
4. arrow-body-style 和 prefer-arrow-callback: 这两个规则在 eslint 和 prettier 中存在不可解决的冲突，所以关闭掉。

至此, prettier 和 eslint 便可以无冲突协作，保存时候也能自动修复并格式化代码了。