手把手配置VSCode，使用ESLint+Prettier统一Vue3项目代码风格

VSCode版本：VSCode 1.71.2

1、创建项目

$ yarn create vite

1.1、输入项目名称：my-app

√ Project name: ... my-app

1.2、选择框架：vue

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte

1.3、选择项目类型：JavaScript。

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript
    TypeScript
    Customize with create-vue
    Nuxt

2、进入项目目录

$ cd my-app

3、安装 ESLint

$ yarn add -D eslint

4、初始化 ESLint 配置

$ npm init @eslint/config

4.1、选择模式

? How would you like to use ESLint? ...
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style

这里笔者选择的是To check syntax and find problems。

4.2、选择语言模块

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

这里笔者选择的是JavaScript modules (import/export)。

4.3、选择语言框架

? Which framework does your project use? ...
  React
> Vue.js
  None of these

这里笔者选择的是Vue.js。

4.4、选择是否使用 TypeScript

Does your project use TypeScript? » No / Yes

这里笔者选择的是No。

4.5、选择代码在哪里运行

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

这里Browser和Node两个都要选中，ESLint 会报'module' is not defined的错误。

4.6、选择ESLint配置文件的格式

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

这里笔者选择的是JavaScript。

4.7、选择是否安装eslint-plugin-vue@latest

The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
? Would you like to install them now? » No / Yes

这里笔者选择的是Yes。

4.8、选择使用哪个软件包管理器

? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

这里笔者选择的是yarn。

执行成功后会在项目根目录下创建一个eslintrc.cjs文件。

eslintrc.cjs文件内容：

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

5、安装Prettier

$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

5.1、创建.prettierrc文件并修改其内容。

$ touch .prettierrc

.prettierrc文件内容：

{
  "bracketSpacing": true,
  "printWidth": 120,
  "proseWrap": "always",
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

修改.prettierrc文件内容后需要重新启动下VSCode。

这里只是简单列举了几个配置属性，如果需要配置其它属性可以根据需要自行配置。

6、修改eslintrc.cjs文件。

主要修改了如下两个地方。

完整的eslintrc.cjs文件内容：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
      'eslint:recommended', 
      'plugin:vue/vue3-recommended', 
      'plugin:prettier/recommended'
  ],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  rules: {}
}

7、附录

7.1、package.json文件内容：

{
  "name": "02-my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "eslint": "^8.23.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.5.1",
    "prettier": "^2.7.1",
    "vite": "^3.1.0"
  }
}

7.2、下面是笔者 VSCode 的配置信息：

{
  "update.enableWindowsBackgroundUpdates": false,
  "workbench.iconTheme": "material-icon-theme",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 每次保存的时候自动格式化
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}