代码规范-ESLint

安装ESLint插件

打开vscode
进入扩展市场
搜索ESLint
点击安装
添加到工作区

这个时候项目根目录会多出来一个.vscode文件夹里面有一个extensions.json文件

bash

{
  "recommendations": [
    "dbaeumer.vscode-eslint"
  ]
}

新建一个文件 settings.json 这样每个使用vscode的人都会按照这个eslint来配置

bash


{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
  "eslint.useFlatConfig": true,
  "eslint.workingDirectories": ["."],
  "stylelint.validate": ["css", "scss", "vue"],
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "prettier.tabWidth": 2,
    "prettier.trailingComma": "all"
  },
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "files.eol": "\n"
}

注意

注意

在大多数情况下， .vscode/settings.json 不需要额外配置 ESLint 配置文件路径，因为 VSCode 的 ESLint 插件会自动读取项目根目录中的 .eslintrc.js 或其他格式的 ESLint 配置文件（如 .eslintrc.json、.eslintrc.yaml、.eslintrc 等）。

这个文件自己创建，自己编写就行。

项目安装ESLint

安装

bash

npx eslint --init

初始化

bash

✔ What do you want to lint? · javascript
✔ How would you like to use ESLint? · To check syntax and find problems
✔ What type of modules does your project use? · Javascript modules (import/export)
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No // 我这里没有使用ts你可以换成你自己的
✔ Where does your code run? · browser, node
ℹ The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals, eslint-plugin-vue
✔ Would you like to install them now?  Yes
✔ Which package manager do you want to use? · pnpm

生成eslint.config.ts文件

import js from '@eslint/js'
import tseslint from '@typescript-eslint/eslint-plugin'
import tsparser from '@typescript-eslint/parser'
import prettierConfig from 'eslint-config-prettier'
import vue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import vueParser from 'vue-eslint-parser'

export default defineConfig([
  // 基础 JavaScript 推荐配置
  js.configs.recommended,

  // Vue 3 推荐配置
  ...vue.configs['flat/recommended'],

  // 全局配置
  {
    files: ['**/*.{js,ts,tsx,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        // Node.js 全局变量
        process: 'readonly',
        Buffer: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
        // 浏览器全局变量
        window: 'readonly',
        document: 'readonly',
        console: 'readonly',
        alert: 'readonly',
        setTimeout: false,
        clearTimeout: false,
        setInterval: false,
        clearInterval: false,
      },
    },
    rules: {
      // 通用规则
      'no-console': 'off',
      'no-debugger': 'error',
      'no-unused-vars': 'off', // 由 TypeScript 插件处理
      'prefer-const': 'error',
      'no-var': 'error',
      // 代码风格
      indent: 'off', // 由 Prettier 处理缩进
      quotes: ['error', 'single'],
      semi: ['error', 'never'],
      // 空行规则 - 最多允许 1 个连续空行
      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 0 }],
      'no-trailing-spaces': 'error',
      'eol-last': ['error', 'always'],
      'padded-blocks': ['error', 'never'],
      'comma-dangle': ['error', 'never'],
    },
  },

  // TypeScript 文件配置
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': tseslint as any,
    },
    rules: {
      // TypeScript 特定规则
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/explicit-function-return-type': 'off',
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      'comma-dangle': ['error', 'never'],
    },
  },

  // Vue 文件配置
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: tsparser,
        extraFileExtensions: ['.vue'],
      },
    },
    plugins: {
      vue,
      '@typescript-eslint': tseslint as any,
    },
    rules: {
      // Vue 特定规则
      'vue/no-v-html': 'off',
      'vue/multi-word-component-names': 'off',
      'vue/no-unused-vars': 'error',
      'vue/no-multiple-template-root': 'off',
      'vue/singleline-html-element-content-newline': 'off',
      'vue/max-attributes-per-line': 'off',
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'never',
            normal: 'always',
            component: 'always',
          },
          svg: 'always',
          math: 'always',
        },
      ],
      // TypeScript 规则在 Vue 文件中
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-explicit-any': 'off',
      // 空行规则 - 最多允许 1 个连续空行
      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 0 }],
      'no-trailing-spaces': 'error',
      'eol-last': ['error', 'always'],
      'padded-blocks': ['error', 'never'],
    },
  },

  // 忽略文件
  {
    ignores: [
      // 依赖
      'node_modules/**',
      '**/node_modules/**',
      // 构建产物
      '**/dist/**',
      // '**/build/**',
      '**/.vitepress/dist/**',
      '**/.vitepress/cache/**',
      '**/*.min.js',
      '**/*.min.css',
      // Turbo 缓存
      '**/.turbo/**',
      '.turbo/**',
      // 测试覆盖率
      'coverage/**',
      '**/coverage/**',
      // 编辑器
      '.vscode/**',
      '.idea/**',
      // 日志
      '**/*.log',
      // 锁文件
      'pnpm-lock.yaml',
      'package-lock.json',
      'yarn.lock',
      // Git
      '.git/**',
      // 临时文件
      '**/*.tmp',
      '.cache/**',
      '**/.cache/**',
    ],
  },

  // Prettier 配置 - 必须放在最后，用于关闭与 Prettier 冲突的规则
  prettierConfig,

  // 重新启用某些格式规则，让 ESLint 能够检测格式错误
  {
    files: ['**/*.{js,ts,tsx,vue}'],
    rules: {
      // 重新启用格式规则，即使 Prettier 会处理它们
      // 这样可以在编辑器中看到错误提示
      semi: ['error', 'never'],
      quotes: ['error', 'single'],
      'comma-dangle': ['error', 'always-multiline'],
      indent: 'off', // 由 Prettier 处理缩进
    },
  },
])

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

修改package.json

新增加的lint检测

json

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint:eslint": "eslint . --ext .js,.mjs,.cjs,.vue",
    "lint:eslintfix": "eslint . --ext .js,.mjs,.cjs,.vue --fix",
    "prepare": "husky install",
    "commit": "git-cz"
  }
}

使用以下命令来检查和修复代码

bash


npm run lint:eslint
npm run lint:eslintfix"

提交代码的时候自动执行eslint检测并修复格式问题

使用 Husky 添加一个 pre-commit 钩子：

bash


npx husky add .husky/pre-commit "npx lint-staged"

执行上述命令后，会在 .husky/ 目录下生成一个 pre-commit 文件，内容如下：

bash

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

然后测试一下

修改一个文件放到缓存区.然后提交
这样他就会报错提交不成功,eslint 必须修改好了才可以

bash

npm run commit

代码规范-ESLint ​

安装ESLint插件 ​

项目安装ESLint ​

安装 ​

初始化 ​

生成eslint.config.ts文件 ​

修改package.json ​

提交代码的时候自动执行eslint检测并修复格式问题 ​

然后测试一下 ​

代码规范-ESLint

安装ESLint插件

项目安装ESLint

安装

初始化

生成eslint.config.ts文件

修改package.json

提交代码的时候自动执行eslint检测并修复格式问题

然后测试一下