工程化之vscode代码格式化项目安装 eslint、prettier 等相关依赖，安装vscode的插件，进行 esl

预备工作

需要安装 核心依赖: eslint prettier 和 附加依赖: 根据不同项目自行安装。
安装 vscode 插件: eslint 、prettier

依赖安装

npm i eslint
npm i prettier
...
# 根据实际项目安装其他需要的依赖，如：
# eslint-plugin-vue
# eslint-plugin-import
# eslint-plugin-prettier
# eslint-import-resolver-alias
# @vue/eslint-config-prettier
# @vue/eslint-config-typescript

插件安装

ESLint: marketplace.visualstudio.com/items?itemN…
Prettier: marketplace.visualstudio.com/items?itemN…

功能配置

文件规则

项目根目录新增 .eslintrc.cjs、.prettierrc.json 、 .prettierignore 等文件

.eslintrc.cjs eslint规则配置文件

// .eslintrc.cjs
module.exports = {
  root: true,
  env: {
    browser: true,
    es2024: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 自定义规则
    'vue/multi-word-component-names': 'off', // 允许单文件组件使用单个单词
    '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any 类型
    'vue/html-self-closing': [
      'error',
      {
        // 自闭合标签配置
        html: {
          void: 'always',
          normal: 'always',
          component: 'always',
        },
      },
    ],
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
}

.prettierrc.json prettier规则配置文件

// .prettierrc.json
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}

.prettierignore prettier校验忽略文件

# .prettierignore
/dist
/node_modules
*.md
*.json

保存时自动格式化

在项目根目录新增.vscode，然后再新增两个文件settings.json、extensions.json

.vscode
|—— extensions.json
|—— settings.json

extensions.json vscode推荐插件配置

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "EditorConfig.EditorConfig",
    "esbenp.prettier-vscode"
  ]
}

settings.json vscode个人工作区配置

{
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "tsconfig.json": "tsconfig.*.json, env.d.ts",
    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .prettier*, prettier*, .editorconfig"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode", 
  "editor.fontSize": 18,
  "window.zoomLevel": 1,
  "editor.mouseWheelZoom": true
}