eslint介绍

本页介绍本项目eslint的基本配置。

安装

npm install eslint@8.57.0 eslint-config-prettier@10.0.2 eslint-plugin-import@2.31.0 eslint-plugin-prettier@5.2.3 eslint-plugin-vue@9.32.0 @typescript-eslint/eslint-plugin@8.25.0 @typescript-eslint/parser@8.25.0 vite-plugin-eslint@1.8.1 prettier@3.5.3 --save-dev

配置

.eslintrc.cjs

可根据自己的项目情况进行调整

module.exports = {
  env: {
    // 环境配置
    es6: true, // 启用ES6的功能
    node: true, // Node.js全局变量和Node.js范围。
    browser: true, // 启用浏览器全局变量。
  },
  parser: 'vue-eslint-parser',
  globals: {
    defineEmits: true,
    defineExpose: true,
    defineProps: true,
    window: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'eslint-config-prettier',
  ],
  parserOptions: {
    // 解析器选项
    ecmaVersion: 'latest', // 指定你想要使用的 ECMAScript 版本
    sourceType: 'module', // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
    parser: '@typescript-eslint/parser', // 解析器，默认使用Espree
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: [
    // 插件
    'vue',
    '@typescript-eslint',
    'prettier',
    'import',
  ],
  settings: {
    // 自定义规则
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
    },
    'import/extensions': ['.js', '.jsx', '.mjs', '.ts', '.tsx'],
    'import/core-modules': [],
    'import/ignore': ['node_modules', '\\.(coffee|scss|css|less|hbs|svg|json)$'],
  },
  rules: {
    eqeqeq: 2, // 严格等号逻辑
    'no-unused-vars': 1, // 未使用的变量进行警告
    'arrow-parens': [0, 'always'], // 箭头函数参数应该始终包含括号
    'arrow-body-style': [1, 'as-needed'], // 箭头函数可以去掉括号就去掉括号
    'prettier/prettier': ['error', { semi: true }],
    'vue/multi-word-component-names': 'off', // 禁用vue文件强制多个单词命名
    '@typescript-eslint/no-explicit-any': ['off', {}], //允许使用any
    '@typescript-eslint/no-this-alias': [
      'error',
      {
        allowedNames: ['that'], // this可用的局部变量名称
      },
    ],
    '@typescript-eslint/ban-ts-comment': 'off', //允许使用@ts-ignore
    '@typescript-eslint/no-non-null-assertion': 'off', //允许使用非空断言
    'no-debugger': 'warn', //提交时不允许有debugger
    'vue/comment-directive': 'off',
    // 确保没有重复引入
    'import/no-duplicates': 'error',
    // 确保 import 语句按照组分类并排序
    'import/order': [
      'error',
      {
        // builtin：内置模块;external：第三方模块;internal：内部引用;sibling：兄弟依赖;parent：父节点依赖;index：index 文件依赖;unknown：未知依赖
        groups: [
          'builtin', // 内置模块（如 'fs'）
          'external', // 外部依赖（如 'vue'）
          'internal', // 内部路径别名（如 '@/utils'）
          'parent', // 父级目录（如 '../foo'）
          'sibling', // 同级目录（如 './constants'）
          'index', // 当前目录的 index 文件
          'object', // 对象导入（如 import { x } from 'y'）
          'type', // 类型导入（如 import type { ... }）
          'unknown',
        ],
        // vue的引入将会排在第一位
        pathGroups: [
          {
            pattern: 'vue',
            group: 'external',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['builtin'],
        // newlines-between 不同组之间是否进行换行
        'newlines-between': 'always',
        // alphabetize 根据字母顺序对每个组内的顺序进行排序
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
};

.eslintignore

在项目的根目录创建一个.eslintignore文件，用于让EsLint不检测一些文件。参考示例：

*.png
*.eot
*.ttf
*.woff
*.svg
*.ico
*.jpg
*.gif

dist
build
public
tests
node_modules

.prettierrc

{
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "arrowParens": "always",
  "bracketSpacing": true,
  "html-whitespace-sensitivity": "ignore"
}

.prettierignore

node_modules
dist

package.json

 "scripts": {
    ... //其他脚本
    "lint": "eslint . --ext .vue,.js,.ts ./", // 全局Lint检查
    "lint:fix": "eslint . --ext .vue,.js,.ts ./ --fix", // 全局lint修复
    // --ext后面跟上的.js、.vue是你要检测文件的后缀，.vue后面的src是要检测的哪个目录下面的文        件。
    // --fix的作用是自动修复根据你配置的规则检测出来的格式问题

    "postinstall": "simple-git-hooks", // 必须有此脚本，有此脚本之后，npm instal的时候，会自动生成.husky文件
    "preinstall": "npx only-allow pnpm"
    ...
  },

  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged",
    "preserveUnused": true
  },

  "lint-staged": {
    "*.{vue,js,jsx,ts,tsx}": [
      "pnpm run lint",
      "prettier --write"
    ],
    "*.{vue,css,scss}": [
      "pnpm run stylelint",
      "prettier --write"
    ]
  }

vite-plugin-eslint配置

在vite.config.ts中plugins加入，有助于在开发时帮助立即发现代码错误：

import eslintPlugin from 'vite-plugin-eslint';

eslintPlugin({
  // Decrease execution time, Beta Cache now correctly recognizes file changes, you can try it out.
  cache: false,
  // Auto fix source code.
  fix: true,

  // Path to eslint instance that will be used for linting.
  // eslintPath,

  // Check all matching files on project startup, too slow, turn on discreetly.
  lintOnStart: false,
  // A single file, or array of files, to include when linting.
  include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
  // A single file, or array of files, to exclude when linting.
  exclude: ['/node_modules/'],
  // The errors found will be printed.
  emitError: true,
  // The warings found will be printed.
  emitWarning: true,
  // Will cause the module build to fail if there are any warnings, based on emitWarning.
  failOnWarning: true,
  // Will cause the module build to fail if there are any errors, based on emitError.
  failOnError: true,
});

vscode 保存代码自动修复配置

• Ctrl+s / command+s 时自动修复代码的格式错误
• 自动修复的规则是读取项目根目录的Eslint规则

1. 安装VsCode的 EsLint 和 vetur 扩展 并处于开启状态
2. 扩展设置

• 依次点击 文件 > 首选项 > 设置 或者 快捷键 cmd + , ;
• 搜索eslint ;
• 点击 在 setting.json 中编辑 ;
• 添加以下配置字段;

  "eslint.validate": [
    "javascript",
    "html",
    "vue",
    "jsx",
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    "source.fixAll.eslint": true,
    "source.fixAll": true
  },