一文教会你结合ESLint Stylistic配置eslint 9代码规范

jerrywus
1,164 阅读3分钟

随着eslint9在2024年4月5日的发布，eslint9将不再内置风格化格式化规则，如果你需要做格式化的配置，需要引入第三方npm包（例如: ESLint Stylistic），同时nodejs版本需要升级到18.18.0以及以上版本。

本文将介绍（以vue3-ts为例）：

  1. 使用ESLint Stylistic进行项目eslint9的配置
  2. vscode如何调用eslint配置文件，在保存的时候自动修复文件风格。
  3. git commit hooks配置，commit时调用eslint进行代码风格的自动修复。
  4. vue3 单文件的规则配置。
  5. vite配置。
  6. webpack5配置。

安装准备

  • 框架无关的安装
pnpm add @typescript-eslint/parser @stylistic/eslint-plugin-ts  @stylistic/eslint-plugin-js @stylistic/eslint-plugin-jsx @stylistic/eslint-plugin-plus -D
  • vue项目额外安装
pnpm add vue-eslint-parser eslint-plugin-vue -D
  • vite额外安装
pnpm add vite-plugin-eslint -D
  • webpack5额外安装
pnpm add eslint-webpack-plugin -D

配置文件

配置文件支持6种格式的后缀：

我的项目采用的是eslint.config.mjs(注意看下你的package.json的type是module，直接eslint.config.js即可，效果是一样的)

配置js/ts/jsx/tsx

如果只考虑.ts,.tsx,.js,.jsx，配置如下即可：

注意parserTs一定要配置，不然ts文件无法生效，tsx需要配置stylisticJsx

import stylisticTs from '@stylistic/eslint-plugin-ts';
import stylisticJs from '@stylistic/eslint-plugin-js';
import stylisticJsx from '@stylistic/eslint-plugin-jsx';
import stylisticPlus from '@stylistic/eslint-plugin-plus';
import parserTs from '@typescript-eslint/parser';

export default [
  {
    plugins: {
      '@stylistic/ts': stylisticTs,
      '@stylistic/js': stylisticJs,
      '@stylistic/jsx': stylisticJsx,
      '@stylistic/plus': stylisticPlus,
    },
    files: [
      '**/*.ts',
      '**/*.tsx',
    ],
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
          tsx: true
        },
        ecmaVersion: 2020,
        useJSXTextNode: true,
        sourceType: 'module',
        parser: parserTs,
      }
    },
    ignores: [
      'node_modules',
      'dist',
    ],
    rules: {
      '@stylistic/js/no-whitespace-before-property': 'error',
    },
  },
];

如何管理rules

这里要感谢一下antfu大佬，不仅帮我们维护了ESLint Stylistic，还提供了规则管理工具

您只需执行

npx @eslint/config-inspector@latest

即可自动打开管理工具，如下：

打开后，我们以@stylistic/js为例，按截图顺序依次点击，就可以到该规则集未使用的规则

image.png

然后我们点击某条规则，会出现如下按钮：

我们可以点击docs查看文档，或者点击copy复制规则名称，如果觉得适合你的项目，将它添加到eslint.config.mjs中即可，规则管理这边就会自动刷新状态

image.png

想要查看已配置的规则，点击using即可

image.png

配置.vue文件

import stylisticTs from '@stylistic/eslint-plugin-ts';
import stylisticJs from '@stylistic/eslint-plugin-js';
import stylisticJsx from '@stylistic/eslint-plugin-jsx';
import stylisticPlus from '@stylistic/eslint-plugin-plus';
import parserTs from '@typescript-eslint/parser';
+ import vueParser from 'vue-eslint-parser';
+ import eslintVue from 'eslint-plugin-vue';

export default [
+ ...eslintVue.configs['flat/recommended'],
  {
    plugins: {
      '@stylistic/ts': stylisticTs,
      '@stylistic/js': stylisticJs,
      '@stylistic/jsx': stylisticJsx,
      '@stylistic/plus': stylisticPlus,
    },
    files: [
      '**/*.ts',
      '**/*.tsx',
+     '**/*.vue',
    ],
    languageOptions: {
+     parser: vueParser,
      parserOptions: {
+       extraFileExtensions: ['.vue'],
        ecmaFeatures: {
          jsx: true,
          tsx: true
        },
        ecmaVersion: 2020,
        useJSXTextNode: true,
        sourceType: 'module',
        parser: parserTs,
      }
    },
    ignores: [
      'node_modules',
      'dist',
    ],
    rules: {
      '@stylistic/js/no-whitespace-before-property': 'error',
      
      // 其他rules...
    },
  },
];

vscode配置

首先你需要在根目录创建一个.vscode文件夹，然后创建settings.json，并安装eslint插件，并开启！！

这里只列出eslint相关配置，内容如下：

其中editor相关配置是配置保存的时候进行自动格式化修复操作。

{
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "eslint.useFlatConfig": true,
  "eslint.options": {
    "overrideConfigFile": "./eslint.config.mjs"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

效果如下（按下ctrl+s即可自动格式化修复）：

image.png

vite配置

pnpm add vite-plugin-eslint -D

vite.config.ts

import eslint from 'vite-plugin-eslint';

export default defineConfig(({ command, mode }) => {
    return {
        // ...
        server: {
          hmr: { overlay: true },
        },
        plugins: [
          vue(),
          vueJsx(),
          eslint({
            failOnWarning: false,
            failOnError: fasle,
            emitWarning: true,
            emitError: true,
          }),
        ],
        // ...
    };
});

webpack配置

const EslintPlugin = require('eslint-webpack-plugin');

// ...
plugins: [
  new EslintPlugin({
    configType: 'flat',
    extensions: ['tsx', 'vue', 'ts'],
    failOnWarning: true,
  }),
],
// ...

git commit hooks

package.json配置

pnpm add husky @commitlint/cli @commitlint/config-conventional -D

  "scripts": {
    "prepare": "chmod a+x .husky/* && husky",
    "lint": "eslint \"**/*.{ts,tsx,vue}\" --fix"
  },

然后创建.husky文件夹

touch commitlint.config.js

cd .husky
touch commit-msg
touch pre-commit

内容分别是：

  • commit-msg
npx --no-install commitlint --edit "$1"
  • pre-commit
npm run lint
  • commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['Feat', 'Fix', 'Doc', 'Style', 'Update', 'Refactor', 'Test', 'Framework', 'Revert'],
    ],
    'type-case': [0, 'always', 'start-case'],
    'type-empty': [0],
    'scope-empty': [0],
    'scope-case': [0],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
    'header-max-length': [0, 'always', 72],
  },
};

当后续git commit -m "Fix: xxx功能"的时候，即可进行自动代码风格的修复。

感谢您的阅读~

avatar
文章
阅读
粉丝