手把手配置VSCode，使用ESLint+Prettier統一Vue3項目代碼風格

VSCode版本：VSCode 1.71.2

1、建立項目

$ yarn create vite           

1.1、輸入項目名稱：02-my-app

√ Project name: ... 02-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 02-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"
  ]
}