代码仓库初始化模板 (4) -- ESLint

发表于 更新于 分类于 阅读次数：

目录

ESLint 代码检查工具。

使用 AlloyTeam ESLint 规则 配置 ESlint.

安装

1
npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy
1
npm install --save-dev @babel/core @babel/eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint eslint-config-alloy eslint-plugin-vue vue-eslint-parser

配置

在代码仓库根目录下添加文件:

.eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const IS_PROD = process.env.NODE_ENV === 'production';

module.exports = {
  extends: ['alloy', 'alloy/typescript'],
  env: {
    // browser: true,
    node: true,
  },
  globals: {},
  rules: {
    /* #region ESLint rules */

    // Possible Errors
    // 这些规则与 JavaScript 代码中可能的错误或逻辑错误有关：
    'no-debugger': [IS_PROD ? 'error' : 'warn'],
    'no-duplicate-imports': 'error', // 禁止重复导入模块

    // Suggestions
    // 这些规则建议了不同的做事方式:
    'no-console': [IS_PROD ? 'error' : 'warn'],

    /* #endregion */

    /* #region @type-eslint rules */
    '@typescript-eslint/prefer-optional-chain': 'off',
    '@typescript-eslint/no-require-imports': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    /* #endregion */
  },
};
.eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const IS_PROD = process.env.NODE_ENV === 'production';

module.exports = {
  extends: ['alloy', 'alloy/vue', 'alloy/typescript'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: {
      js: '@babel/eslint-parser',
      jsx: '@babel/eslint-parser',

      ts: '@typescript-eslint/parser',
      tsx: '@typescript-eslint/parser',

      // Leave the template parser unspecified, so that it could be determined by `<script lang="...">`
    },
  },
  env: {
    browser: true,
  },
  globals: {},
  rules: {
    /* #region ESLint rules */

    // Possible Errors
    // 这些规则与 JavaScript 代码中可能的错误或逻辑错误有关：
    'no-debugger': [IS_PROD ? 'error' : 'warn'],
    'no-duplicate-imports': 'error', // 禁止重复导入模块

    // Suggestions
    // 这些规则建议了不同的做事方式:
    'no-console': [IS_PROD ? 'error' : 'warn'],

    /* #endregion */

    /* #region @type-eslint rules */
    '@typescript-eslint/prefer-optional-chain': 'off',
    '@typescript-eslint/no-require-imports': 'off',
    '@typescript-eslint/explicit-member-accessibility': 'off',
    /* #endregion */
  },
};

添加 ESlint 命令

1
npm pkg set scripts.eslint="eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts,.vue"

VSCode 添加 ESlint 自动验证

修改 .vscode/settings.json 文件：

.vscode/settings.json
1
2
3
4
5
6
7
8
9
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

添加 ignore

在代码仓库根目录下添加文件:

.eslintignore
1
2
node_modules
dist