前端eslint及格式化配置指南

前言

前端代码规范如今已和eslint密不可分，尤其对于大型项目而言，代码统一规范显得尤为重要！本文主要讲述前端eslint常用配置（vue、react）及vscode自动代码格式化配置，欢迎各路大神评论指正！

正文

1 配置说明由浅入深

1.1 eslint生成配置文件

eslint官方网站以及提供了npm包自动生成不同项目的eslint配置，不论你的代码风格是vue、react还是js、ts都能实现，并且针对不同的选择提供了不同的父级规则模板供选择，这么便利的工具有什么理由不使用呢？盘它就对了！奉上eslint官网链接, :point_left: 快去学习一下吧！

执行 npm init @eslint/config后按照傻瓜式指引即可

1.2 推荐公用校验规则

eslint官方以及模板提供的代码校验规则已经涵盖了大多数场景，但是仍不完善，如单双引号问题、单行最大字符数控制以及末尾分号控制等，需要编写独立校验规则覆盖已有规则，现奉献本人整理的常用规则如下：

const isDevelopment = true

// https://eslint.org/docs/latest/rules
const rules = {
    // 允许单文件没有默认导出
    // https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/prefer-default-export.md
    'import/prefer-default-export': [
        'off', // 'off' | 'warn' | 'error'
        { target: 'any' }, // default is "single", 'single' | 'any'
      ],
      // 换行符为windows
      // https://eslint.org/docs/latest/rules/linebreak-style#options
      'linebreak-style': ['off', 'windows'], // unix \n windows \n\r vscode 右下角 End of line sequece 可切换换行符
      // 禁止结尾分号
      // https://eslint.org/docs/latest/rules/semi#options
      semi: ['error', 'never'],
      // 不允许空代码块，允许空catch
      // https://eslint.org/docs/latest/rules/no-empty
      'no-empty': ['error', { allowEmptyCatch: true }],
      // 开发模式下允许console生产不允许
      //  https://eslint.org/docs/latest/rules/no-console
      'no-console': [isDevelopment ? 'off' : 'error'], // off / error { allow: ["warn", "error"] }
      // 箭头函数单个参数可以没有括号
      // https://eslint.org/docs/latest/rules/arrow-parens#rule-details
      'arrow-parens': ['error', 'as-needed'],
      // 单行不能超过80个字符
      // https://eslint.org/docs/latest/rules/max-len#rule-details
      'max-len': ['error', { code: 80 }],
}

module.exports = rules

1.3 添加ts校验规则

参照大神整理的

1.4 添加vue校验规则

安装相关依赖 npm install --save-dev eslint-plugin-vue

（1）vue2

// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:vue/essential"
],
"plugins": [
       "vue"
],

（1）vue3

// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:vue/vue3-essential"
],
"plugins": [
       "vue"
],

1.5 添加react校验规则

安装相关依赖 npm install --save-dev eslint-plugin-react

// 在.eslintrc.js中加入
"extends": [
    ...
    "plugin:react/recommended"
],
"plugins": [
       "react"
],

2 vscode保存格式化配置

以上对校验规则以及如何配置作了详细说明，本节介绍如何配置vscode按照改规则进行代码格式化。

（1）安装vscode指定插件 eslint

（2）修改vscode用户配置如下：

...
"eslint.format.enable": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.validate": [
    "javascript",
    "javescriptreact",
    "vue",
    "html"
]
...

（3）重启vscode应用配置，编写代码测试效果

注意：如果遇到eslint某些代码无法被格式化的情况，可采用其他格式化工具如vetur、prettier等进行格式化再保存。

3 设置程序开发模式下运行eslint校验

在开发模式下进行eslint校验，可以有效的规避大多数代码不规范问题。与git hook不同，开发模式下可实时对不规范的代码进行反馈，保证代码整体质量。以webpack4+vue2.x为例，需要修改配置文件如下：

// webpack.config.js
...
module: {
    rules: [
      {
         test: /\.(js|vue)$/,
         laoder: 'eslint-loader',
         enforece: 'pre',
         include: [path.resolve('src')],
         options: [
            formatter: require('eslint-friendly-formatter')
         ]  
      }
    ]
}
...

vue3采用eslint-plugin-vue，具体配置参照官方网站

原文链接：https://juejin.cn/post/7324750282859905061 作者：peter_yu