ESLint与Prettier的结合

---

前言

强行一致、双重格式化，最为致命

---

一、ESLint?

记得第一次接触 eslint 的时候，这到底是什么啊？怎么把这东西删掉啊

VSCode 配置

使用 VSCode 的 Eslint 插件去操作是很方便的，所以我们先来安装 Eslint 插件

安装完成之后当然就是配置项了，以下就是文件保存时会根据配置自动修复检查出来的问题项

// eslint代码自动检查相关配置
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.enable": true,
"eslint.run": "onSave",
"eslint.alwaysShowStatus": true,
"eslint.options": {
    "extensions": [
    ".js",
    ".vue"
    ]
},
"eslint.validate": [
    "vue",
    "javascript",
    "html",
],

然后我们就要开始针对项目来配置一些检查规则了，也就是项目中的 .eslintrc 文件，该文件后缀有很多种，用js就可以了

我们可以 ctrl+shift+p 然后键入以下命令来完成新建 eslint 配置文件的操作

eslint.createConfig

然后选择没有 eslint 配置文件的项目

接下来就是选择风格，语言等等，其实我们不需要，我们可以直接复制下面整合好的 .eslintrc.js 配置文件到根目录

好了跳过了，没什么用哈，还是我们自己定义好

.eslintrc.js

这里的配置使用了 typescript 和 prettier ，所以要引入一些依赖，确保有以下开发依赖

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "eslint": "^8.1.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-define-config": "1.1.2",
    "eslint-plugin-prettier": "4.0.0"
}

依赖安装完成之后，在根目录新建 .eslintrc.js 文件，内容如下，想改规则就修改 rules 的内容吧

const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  root: true,
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      tsx: true
    }
  },
  env: {
    browser: true,
    node: true
  },
  globals: {
    jest: 'readonly'
  },
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  overrides: [
    {
      files: ['*.ts', '*.vue'],
      rules: {
        'no-undef': 'off'
      }
    }
  ],
  rules: {
    // 箭头函数
    'arrow-parens': ['error', 'always'],
    'arrow-body-style': ['error', 'as-needed'],
    // js/ts
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
    camelcase: ['error', { properties: 'never' }],
    indent: ['error', 2, { SwitchCase: 1 }],
    'comma-dangle': [2, 'never'],
    'linebreak-style': [0, 'error', 'windows'],
    'max-len': ['warn', 80],
    'no-var': 'error',
    'no-empty': ['error', { allowEmptyCatch: true }],
    'no-void': 'error',
    'no-var-requires': 'off',
    // 'no-console': ['warn', { allow: ['error'] }],
    'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
    'prefer-const': [
      'warn',
      { destructuring: 'all', ignoreReadBeforeAssign: true }
    ],
    'prefer-template': 'error',
    'object-shorthand': [
      'error',
      'always',
      { ignoreConstructors: false, avoidQuotes: true }
    ],
    'block-scoped-var': 'error',
    'no-constant-condition': ['error', { checkLoops: false }],
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
    '@typescript-eslint/consistent-type-imports': [
      'error',
      { disallowTypeAnnotations: false }
    ],
    // prettier
    'prettier/prettier': [
      'error',
      {
        semi: false,
        singleQuote: true,
        printWidth: 80,
        trailingComma: 'none',
        endOfLine: 'auto',
        parser: 'flow'
      }
    ]
  }
})

.eslintignore

这里是 eslint 忽略检查的一些文件和目录，简单配置一些就可以了，不是必须的，可以跳过这一步

libs/**
out/**/*.js

到这一步，你就需要重启下你 VScode 中的 eslint 插件，命令 eslint.restart

如果输出日志像下面的一样不报错那么就可以在代码保存时自动修正代码了

来找个文件改改缩进加加减减分号试试

原内容，报错看起来爽死了，因为马上就都该一键消失了

ctrl+s 后

ohhhhhhhhhhhhhh…

这里你需要注意你 eslint 的规则与 prettier 的规则是否重复，重复了就会出现下面的情况（假如分号冲突）

保存一下分号全没了 prettier 就会报错，再保存一下分号全有了 eslint 又开始报错，报错循环

Rules 常用规则

rules规则文档

以下是我个人收集的经常用的规则

规则	说明
camelcase: [‘error’, { properties: ‘never’ }],	驼峰，不检查属性
‘comma-dangle’: [2, ‘never’],	不允许对象属性尾随逗号
indent: [‘error’, 2, { SwitchCase: 1 }],	缩进2格，排除Switch Case的缩进
‘linebreak-style’: [‘error’, ‘windows’],	强制 windows 行结束符
‘max-len’: [‘warn’, 80],	最大长度80，警告
‘prefer-const’: [ ‘warn’ { destructuring: ‘all’, ignoreReadBeforeAssign: true }],	变量未重新赋值则强制使用const
quotes: [‘error’, ‘single’],	强制使用单引号
semi: [‘error’, ‘never’],	结尾不加分号
indent: [‘error’, 2, { SwitchCase: 1 }],	缩进2格，排除Switch Case的缩进

二、Prettier

安装插件

至于 Prettier 就没什么好说的了，格式化美化代码的插件

你可以在 VSCode 的 settings.json 中配置一下规则

然后去想格式化代码的文件中右键，可以配置格式化方式，选择 Prettier格式化 就完事了，格式化 html 文件挺好用的

也可以单独在根目录使用 .prettierrc 文件，例如

{
  "semi": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

之后再慢慢记录规则项

---