Cao Note

外观

ESLint 与 Prettier ​

ESLint ​

安装 ​

bash
npm init @eslint/config
# 或
npm install -D eslint @eslint/js
npm init @eslint/config
# 或
npm install -D eslint @eslint/js

配置示例 ​

js
// eslint.config.js （Flat Config，ESLint 9+）
import js from '@eslint/js'
import ts from 'typescript-eslint'
import vue from 'eslint-plugin-vue'
import prettier from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  ...vue.configs['flat/recommended'],
  prettier,
  {
    rules: {
      // 可能的错误
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-unused-vars': 'off', // 交给 TypeScript 处理
      'prefer-const': 'error',

      // TypeScript
      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/explicit-function-return-type': 'off',

      // Vue
      'vue/multi-word-component-names': 'off',
      'vue/require-default-prop': 'off',
      'vue/max-attributes-per-line': ['warn', { singleline: 3 }],
    },
  },
  {
    ignores: ['dist/**', 'node_modules/**', '*.config.js'],
  },
]
// eslint.config.js （Flat Config，ESLint 9+）
import js from '@eslint/js'
import ts from 'typescript-eslint'
import vue from 'eslint-plugin-vue'
import prettier from 'eslint-config-prettier'

export default [
  js.configs.recommended,
  ...ts.configs.recommended,
  ...vue.configs['flat/recommended'],
  prettier,
  {
    rules: {
      // 可能的错误
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-unused-vars': 'off', // 交给 TypeScript 处理
      'prefer-const': 'error',

      // TypeScript
      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/explicit-function-return-type': 'off',

      // Vue
      'vue/multi-word-component-names': 'off',
      'vue/require-default-prop': 'off',
      'vue/max-attributes-per-line': ['warn', { singleline: 3 }],
    },
  },
  {
    ignores: ['dist/**', 'node_modules/**', '*.config.js'],
  },
]

.eslintrc（传统配置，ESLint 8） ​

json
{
  "env": { "browser": true, "es2022": true, "node": true },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "@vue/typescript/recommended",
    "prettier"
  ],
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}
{
  "env": { "browser": true, "es2022": true, "node": true },
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "@vue/typescript/recommended",
    "prettier"
  ],
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}

常用插件 ​

插件作用
typescript-eslintTypeScript 规则
eslint-plugin-vueVue 3 规则
eslint-plugin-reactReact 规则
eslint-plugin-react-hooksReact Hooks 规则
eslint-plugin-import导入排序/检查
eslint-plugin-unicorn更多实用规则
eslint-config-prettier关闭与 Prettier 冲突的规则

Prettier ​

安装 ​

bash
npm install -D prettier eslint-config-prettier
npm install -D prettier eslint-config-prettier

配置 ​

json
// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false
}
// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false
}

忽略文件 ​

# .prettierignore
dist/
node_modules/
pnpm-lock.yaml
CHANGELOG.md
# .prettierignore
dist/
node_modules/
pnpm-lock.yaml
CHANGELOG.md

VS Code 自动格式化 ​

json
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

ESLint + Prettier 协作流程 ​

开发写入 → ESLint（代码质量） → Prettier（代码格式） → 保存
              ↓
          Git commit → Husky → lint-staged → 只检查暂存文件
开发写入 → ESLint（代码质量） → Prettier（代码格式） → 保存
              ↓
          Git commit → Husky → lint-staged → 只检查暂存文件

原则： ESLint 负责逻辑正确（不会出错的规则），Prettier 负责风格统一（缩进、引号、分号）。 ESLint 通过 eslint-config-prettier 关闭与 Prettier 重叠的规则。

与 TypeScript 配合 ​

bash
npm install -D typescript-eslint
npm install -D typescript-eslint
js
// eslint.config.js
import ts from 'typescript-eslint'

export default ts.config(
  ...ts.configs.recommended,
  ...ts.configs.stylistic,
  {
    rules: {
      '@typescript-eslint/consistent-type-imports': [
        'warn',
        { prefer: 'type-imports' },
      ],
    },
  },
)
// eslint.config.js
import ts from 'typescript-eslint'

export default ts.config(
  ...ts.configs.recommended,
  ...ts.configs.stylistic,
  {
    rules: {
      '@typescript-eslint/consistent-type-imports': [
        'warn',
        { prefer: 'type-imports' },
      ],
    },
  },
)

Copyright © 2024-present xiaocao