第三章 【前端】项目配置（3.3）——代码规范

3.3 代码规范

3.3.1 editorconfig

官网：https://editorconfig.org/

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

1. 安装 EditorConfig for VS Code 插件。

   

2. 在项目根目录下新建 .editorconfig 文件。

   Vue2 官网使用的文件，Vue3 官网未使用。

   

   # http://editorconfig.org
   
   root = true
   
   [*] # 表示所有文件适用
   charset = utf-8 # 设置文件字符集为 utf-8
   indent_style = space # 缩进风格（tab | space）
   indent_size = 2 # 缩进大小
   end_of_line = lf # 控制换行类型(lf | cr | crlf)
   trim_trailing_whitespace = true # 去除行首的任意空白字符
   insert_final_newline = true # 始终在文件末尾插入一个新行
   
   [*.md] # 表示仅 md 文件适用以下规则
   max_line_length = off
   trim_trailing_whitespace = false
   
   

3.3.2 Prettier

官网：https://www.prettier.cn/

1. 安装 Prettier 插件
   

2. 安装 Prettier

   npm install --save-dev --save-exact prettier
   

   当前 package.json 文件：

   {
     "name": "yumi-admin",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vue-tsc -b && vite build",
       "preview": "vite preview"
     },
     "dependencies": {
       "vue": "^3.4.37"
     },
     "devDependencies": {
       "@vitejs/plugin-vue": "^5.1.2",
       "prettier": "3.3.3",
       "typescript": "^5.5.3",
       "vite": "^5.4.",
       "vue-tsc": "^2.0.29"
     }
   }
   
   

3. 创建 .prettierrc.js 文件

   .prettierrc、.prettierrc.json、.prettierrc.yml、.prettierrc.yaml、.prettierrc.json5、.prettierrc.js、prettier.config.js、.prettierrc.mjs、prettier.config.mjs、.prettierrc.cjs、prettier.config.cjs、.prettierrc.toml 均可识别，详情参考官网 https://www.prettier.cn/docs/configuration.html。

   

   // prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs
   
   /** @type {import("prettier").Config} */
   const config = {
     // 一行最多多少个字符
     printWidth: 150,
     // 指定每个缩进级别的空格数
     tabWidth: 2,
     // 使用制表符而不是空格缩进行
     useTabs: false,
     // 在语句末尾打印分号
     semi: true,
     // 使用单引号而不是双引号
     singleQuote: true,
     // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
     quoteProps: "as-needed",
     // 在JSX中使用单引号而不是双引号
     jsxSingleQuote: false,
     // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
     trailingComma: "es5",
     // 在对象文字中的括号之间打印空格
     bracketSpacing: true,
     // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
     arrowParens: "always",
     // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
     rangeStart: 0,
     rangeEnd: Infinity,
     // 指定要使用的解析器，不需要写文件开头的 @prettier
     requirePragma: false,
     // 不需要自动在文件开头插入 @prettier
     insertPragma: false,
     // 使用默认的折行标准 always\never\preserve
     proseWrap: "preserve",
     // 指定HTML文件的全局空格敏感度 css\strict\ignore
     htmlWhitespaceSensitivity: "css",
     // Vue文件脚本和样式标签缩进
     vueIndentScriptAndStyle: false,
     // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
     endOfLine: "lf",
   };
   
   export default config;
   
   

4. 在根目录下新建 .prettierignore 文件，忽略对部分文件的格式化。

   /dist/*
   /html/*
   .local
   /node_modules/**
   
   **/*.svg
   **/*.sh
   
   /public/*
   

5. 检查修改。

   • 检查

     npx prettier . --check
     

     

   • 修改

     npx prettier . --write
     

     

6. 设置 ts 文件默认格式化器为 prettier

   在 main.ts 文件空白处点击右键

   

   

   

7. 设置保存时自动格式化

   

   此时，手动保存（Ctrl+S）时会自动格式化。

8. 设置自动保存

   

   在 Files: Auto Save 的下拉菜单中有以下几个选项：

   • off：关闭自动保存功能。
   • afterDelay：在固定的延迟时间之后自动保存，在 files.autoSaveDelay 中可以设置延迟时间。
   • onFocusChange：当编辑器失去焦点时自动保存。
   • onWindowChange：当窗口失去焦点时自动保存。

   注意

   设置 afterDelay，自动保存时自动格式化不会生效，原因为：

   

3.3.3 ESLint

官网：https://eslint.nodejs.cn/

ESLint 用于查找并修复 JavaScript 代码中的问题

1. 安装 ESLint 插件

   

2. 安装和配置 ESLint

   npm init @eslint/config@latest
   

   • 选项参考

     

   • 当前 package.json 文件：

     {
       "name": "yumi-admin",
       "private": true,
       "version": "0.0.0",
       "type": "module",
       "scripts": {
         "dev": "vite",
         "build": "vue-tsc -b && vite build",
         "preview": "vite preview"
       },
       "dependencies": {
         "vue": "^3.4.37"
       },
       "devDependencies": {
         "@eslint/js": "^9.10.0",
         "@vitejs/plugin-vue": "^5.1.2",
         "eslint": "^9.10.0",
         "eslint-plugin-vue": "^9.28.0",
         "globals": "^15.9.0",
         "prettier": "3.3.3",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.6.0",
         "vite": "^5.4.1",
         "vue-tsc": "^2.0.29"
       }
     }
     
     

   • 生成的 eslint.config.js 文件：

     import globals from "globals";
     import pluginJs from "@eslint/js";
     import tseslint from "typescript-eslint";
     import pluginVue from "eslint-plugin-vue";
     
     
     export default [
       {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
       {languageOptions: { globals: globals.browser }},
       pluginJs.configs.recommended,
       ...tseslint.configs.recommended,
       ...pluginVue.configs["flat/essential"],
       {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
     ];
     

   • ESLint 开始工作

   

3. 解决 ESLint 和 Prettier 之间的冲突

   • 安装 eslint-config-prettier、eslint-plugin-prettier

     npm install --save-dev eslint-plugin-prettier eslint-config-prettier
     

     当前 package.json 文件：

     {
       "name": "yumi-admin",
       "private": true,
       "version": "0.0.0",
       "type": "module",
       "scripts": {
         "dev": "vite",
         "build": "vue-tsc -b && vite build",
         "preview": "vite preview"
       },
       "dependencies": {
         "vue": "^3.4.37"
       },
       "devDependencies": {
         "@eslint/js": "^9.10.0",
         "@vitejs/plugin-vue": "^5.1.2",
         "eslint": "^9.10.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-vue": "^9.28.0",
         "globals": "^15.9.0",
         "prettier": "3.3.3",
         "typescript": "^5.5.3",
         "typescript-eslint": "^8.6.0",
         "vite": "^5.4.1",
         "vue-tsc": "^2.0.29"
       }
     }
     
     

   • 将 eslint-config-prettier、eslint-plugin-prettier 添加到 ESLint 的配置中，确保把它放在最后，这样它就有机会覆盖其他配置

     import globals from "globals";
     import pluginJs from "@eslint/js";
     import tseslint from "typescript-eslint";
     import pluginVue from "eslint-plugin-vue";
     // ++++++++++
     import eslintConfigPrettier from "eslint-config-prettier";
     import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
     // ----------
     
     export default [
       {files: ["**/*.{js,mjs,cjs,ts,vue}"]},
       {languageOptions: { globals: globals.browser }},
       pluginJs.configs.recommended,
       ...tseslint.configs.recommended,
       ...pluginVue.configs["flat/essential"],
       {files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
       // ++++++++++
       eslintConfigPrettier,
       eslintPluginPrettierRecommended,
       // 
     ];
     
     

   • eslint.config.js 报错，说明设置生效

     

     这些错误是双引号与 Prettier 设置的单引号冲突导致的，解决方法是按 Ctrl+S 让系统自动格式化。

     如果不能自动格式化，参照 3.3.2 设置 js 文件的默认格式化器。

   请分别参阅 eslint-config-prettier 官网、eslint-plugin-prettier 官网、eslint-plugin-vue 官网

   eslint-config-prettier 和 eslint-plugin-prettier 是用于与 ESLint 和 Prettier 集成的两个不同的包。

   • eslint-config-prettier ：这是一个 ESLint 配置规则的包，它将禁用与 Prettier 冲突的 ESLint 规则。使用 eslint-config-prettier 可以确保 ESLint 规则与 Prettier 的代码格式化规则保持一致，避免二者之间的冲突。

   • eslint-plugin-prettier ：这是一个 ESLint 插件，它将 Prettier 应用到 ESLint 中。它会使用 Prettier 来格式化代码，并将格式化结果作为 ESLint 的一项规则来检查代码。使用 eslint-plugin-prettier 可以在代码检查的同时，自动格式化代码，使其符合 Prettier 的规则。

   通常情况下，我们需要同时安装这两个包来实现 ESLint 和 Prettier 的集成。首先，使用 eslint-config-prettier 禁用与 Prettier 冲突的 ESLint 规则，然后使用 eslint-plugin-prettier 将 Prettier 应用到 ESLint 中，以便在代码检查时自动格式化代码。