前端项目中，为了统一项目代码格式，同时方便代码格式化，通常会引入格式化插件，eslint则是最为普遍的工具。但在复杂的项目中，使用eslint难免会遇到各种问题，比如格式化工具之间的冲突、格式化不生效等等。所以对eslint配置进行更深入的了解很有必要。

1、eslint 配置文件

项目中优先会使用项目根目录下的 .eslintrc.js

其次，使用 package.json 文件中的配置

js 复制代码

{
	"eslintConfig": {
        "rules": {
            "semi": true
        }
	}
}

前面都没有，就用vscode配置 settings.json中的配置
js 复制代码
```
"eslint.options": {
  "rules": {
    "semi": true
  }
}
```

2、保存自动格式化

为了进一步提高开发效率，我们希望在保存文件时自动修复eslint校验，在 vscode 的 settings.json 中添加以下配置

json 复制代码

{
  // 自动修正 eslint 校验
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

配置写在系统配置文件中，无法同步给所有项目的开发者，建议在项目根目录中新建 .vscode 目录，在目录中创建 settings.json 文件，并提交到 git，从而对 vscode 的系统配置进行覆盖。

如果开启了自动修复 eslint，就不需要开启保存自动格式化了 "editor.formatOnSave": false ，如果开启自动格式化，需要给不同文件类型指定格式化插件，如果不同插件规则不同还容易冲突

当然，如果需要对css、html文件进行格式化校验，就需要用到 vscode 的 prettier 插件，并配置prettier规则，同时开启保存自动格式化，并将css、html文件指定格式化插件为 prettier，此处不作展开。

3、eslint 常用配置项

更多配置见官网文档

js 复制代码

module.exports = {
    // 表示这是项目根目录中的主要ESLint配置文件
    root: true,

    // 列出要忽略的目录或文件
    ignorePatterns: ['node_modules/', 'dist/', 'build/'],

    // 项目运行的环境
    env: {
        node: true, // 支持 node 语法
        browser: true, // 支持浏览器语法，如 window、document
        es6: true, // 或 es2015，支持 es6 语法
    },

    // 引入对应插件可以使用社区推荐的格式化风格，否则很多规则需要自己配
    extends: [
        // eslint默认推荐的格式化风格eslint:recommended
        // eslint:recommended默认推荐的规则会在官网中标出，也可使用其他代码风格的插件
        // rules的规则会覆盖 eslint:recommended 的规则
        "eslint:recommended"
    ],

    // 指定解析器，指定分析 js 的特定语法
    parserOptions: {
        parser: "babel-eslint", // 使用babel解析器，允许ESLint分析ES6+语法
    }

    // 定义代码校验规则：代码风格
    rules: {
        semi: ["error", "never"], // 是否使用分号
        quotes: ["error", "single"], // 单引号还是双引号
    },

        // 指定全局变量，一些自定义对全局变量，可在此处声明，避免校验错误
    "globals": {
      "var1": "writable",
      "var2": "readonly"
    }
}

4、支持vue文件格式化

eslint 默认只支持对 js 文件进行校验，要校验 vue 文件，需要使用插件 plugin:vue/essential，需安装依赖 eslint-plugin-vue

js 复制代码

module.exports = {
    // ...
    // 引入对应插件可以使用社区推荐的格式化风格，否则很多规则需要自己配
    extends: [
        // eslint默认推荐的格式化风格eslint:recommended，也可使用其他代码风格的插件
        "eslint:recommended",
        // 支持对 vue 文件进行 eslint 校验
        "plugin:vue/essential"
    ]
}

5、prettier

eslint支持对 js 和 vue 文件中的 js 进行 eslint 校验，但不支持对 html、css 等进行格式化，这个时候就需要使用到 prettier 插件

使用prettier需安装以下插件(vscode不需要另外安装prettier插件)：
- prettier
- eslint-plugin-prettier ：将 Prettier 规则集成到 ESLint 中
- @vue/eslint-config-prettier：禁用与 Prettier 冲突的 ESLint 规则，优先使用prettier的规则，@vue/prettier 插件实际上是 @vue/eslint-config-prettier 的一部分
在 eslint 中配置 prettier

js 复制代码

module.exports = {
    // ...
    // 引入对应插件可以使用社区推荐的格式化风格，否则很多规则需要自己配
    extends: [
        // eslint默认推荐的格式化风格eslint:recommended，也可使用其他代码风格的插件
        "eslint:recommended",
        // 支持对 vue 文件进行 eslint 校验
        "plugin:vue/essential",
        // 支持 prettier
        "@vue/prettier"
    ]
}

在源码 node_modules/@vue/eslint-config.prettier/index.js 中，可以看到 @vue/eslint-config-prettier的具体配置：

js 复制代码

module.exports = {
  plugins: ['prettier'], // 使用 prettier 插件
  extends: [
    require.resolve('eslint-config-prettier'),
    require.resolve('eslint-config-prettier/vue')
  ],
  rules: {
    'prettier/prettier': 'warn' // 不符合 prettier 规则的，进行警告
  }
}

6、常用规则配置

常用错误级别：错误：error、警告：warn、关闭：off
开启关闭：开启：always、关闭：never
更多规则见官网配置

常用js规则

js 复制代码

module.exports = {
    {
        "semi": "always",  // 强制使用分号
        "quotes": "single",  // 强制使用单引号
        "no-console": "error",  // 禁止使用 console 在生产环境中
        "no-unused-vars": "error",  // 禁止未使用的变量
        "indent": ["error", 2]  // 强制使用 2 个空格缩进
    }
};

常用vue规则

js 复制代码

module.exports = {
  rules: {
    "vue/html-indent": ["error", 2],  // 强制 HTML 缩进为 2 个空格
    "vue/html-self-closing": ["error", {"html": {"void": "always"}}],  // 要求自动关闭的标签自闭合
    "vue/no-unused-vars": "error",  // 禁止未使用的 Vue.js 组件定义
    "vue/require-v-for-key": "error",  // 要求 v-for 使用 key
    "vue/order-in-components": ["error", {"order": ["name", "components", "props", "data", "methods"]}]  // 强制组件选项的顺序
  }
};

常用css规则

js 复制代码

module.exports = {
    rules: {
        {
              "printWidth": 80,         // 每行代码的最大字符数
              "tabWidth": 2,            // 缩进使用的空格数
              "useTabs": false,         // 使用空格而非制表符进行缩进
              "semi": true,             // 在语句末尾添加分号
              "singleQuote": false,     // 使用单引号而非双引号
              "quoteProps": "as-needed", // 仅在必要时为对象属性添加引号
              "jsxSingleQuote": false,  // 在 JSX 中使用单引号而非双引号
              "trailingComma": "es5",   // 在多行对象和数组末尾添加逗号
              "bracketSpacing": true,   // 在对象字面量括号间打印空格
              "arrowParens": "always",  // 为单一箭头函数参数添加括号
              "endOfLine": "auto",      // 自动选择行尾序列（'lf' | 'crlf' | 'cr' | 'auto'）
              "htmlWhitespaceSensitivity": "css" // 针对HTML文件中的CSS样式的空格敏感性
        }
    }
}

7、禁用 eslint 校验

对整个文件禁用

js 复制代码

/* eslint-disable */
// 该文件内的所有代码都将被禁用 ESLint 校验

对单行代码禁用

js 复制代码

const someCode = '...';
// eslint-disable-next-line
console.log(someCode); // 该行代码将被禁用 ESLint 校验

8、提交时进行eslint校验并修复

为了严格规范项目代码风格，我们还可以在代码提交时自动对代码进行一次eslint校验

安装husky：npm install husky ---save-dev
在 package.json 中配置提交时触发钩子

json 复制代码

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": [
    "eslint --fix",
    "git add"
  ],
  "*.vue": [
    "eslint --fix",
    "git add"
  ],
	// 也支持这种写法
	"src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

【代码规范】一文搞懂项目中的eslint配置

1、eslint 配置文件

2、保存自动格式化

3、eslint 常用配置项

4、支持vue文件格式化

5、prettier

6、常用规则配置

常用js规则

常用vue规则

常用css规则

7、禁用 eslint 校验

8、提交时进行eslint校验并修复