Eslint + Prettier 格式化 Vue3 代码

VsCode 插件配置安装

1. 安装插件 Vue Language Features (Volar)

   
   

2. 安装 Eslint

   
   

3. 安装 Prettier

   
   

4. 注意：禁用或卸载 Vetur

需要配置的文件

1. 在 Vscode 项目根目录下： .vscode/extensions.json

{
  "recommendations": [
    "johnsoncodehk.volar",
    "johnsoncodehk.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint"
  ],
}

2. 对项目工作区单独设置 .vscode/settings.json

{
  // eslint 保存格式化
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".ts", ".jsx", ".tsx", ".vue"]
  },
  // 编辑器保存格式化
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  // .ts 文件格式化程序
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // .vue 文件格式化程序
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 操作时作为单词分隔符的字符
  "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 行尾字符
  "files.eol": "\n",
  // 保存到额时候用使用 prettier进行格式化
  "editor.formatOnSave": true,
  
  // // 不要有分号
  // "prettier.semi": false,
  // // 使用单引号
  // "prettier.singleQuote": true,
  // // 默认使用prittier作为格式化工具
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  // // 一行的字符数，如果超过会进行换行，默认为80
  // "prettier.printWidth": 200,
  // // 尾随逗号问题，设置为none 不显示 逗号
  // "prettier.trailingComma": "none"
}

3. 在项目的根目录下新建 .prettierrc 文件

{
  "semi": false,
  "singleQuote": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "none"
}

● semi：语句末尾是否要加分号，默认值 true，选择 false 表示不加
● singleQuote：使用单引号还是双引号，选择 true，使用单引号
● useTabs：使用 tab 缩进还是空格缩进，选择 false
● tabWidth：tab 是空格的情况下，是几个空格，选择 2 个
● printWidth：当行字符的长度，推荐 80，也有人喜欢 100 或者 120
● trailingComma：在多行输入的尾逗号是否添加，设置为 none

4. 在项目的根目录下新建 .prettierignore 忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

5. 在 .eslintrc.cjs 文件中配置规则，关闭 prettier 的警告

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  ...
  rules: {
    "prettier/prettier": "off",
  }
}