【项目】代码规范

项目代码规范

1. editorconfig（集成配置）

作用：有助于为不同的IDE编辑器上处理同一个项目的多个开发人员维护一致的编码风格。
（如何用同一个编辑器则没必要）

# 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

注：VScode需安装插件：EditorConfig for VS Code

---

2. Prettier（格式化工具）

使用方法：

1. 安装：npm install prettier -D（创建工程时若选了有关选项，则忽略这一步）

2. 配置.prettierrrc文件

   {
     "useTabs": false, // 使用空格缩进
     "tabWidth": 2, // tab键=2空格
     "printWidth": 80, // 一行的最大容量
     "singleQuote": true, // 使用单引号
     "trailingComma": "none", // 对象最后一个属性加逗号
     "semi": true // 语句最后加分号
   }
   

3. 忽略文件（可有可无）

   /dist/*
   .local
   .output.js
   /node_modules/**
   
   **/*.svg
   **/*.sh
   
   /public/*
   

4. VScode安装的插件

   

5. VScode配置

   • settings =>format on save => √
   • settings => editor default format => 选择 prettier

6. 测试生效：保存（Ctrl+S）即可格式化代码

---

3. ESlint（代码检测）

创建工程时选择了ESlint，Vue默认帮助配置了ESlint环境。

1. VScode安装插件

   

2. 解决ESlint与prettier冲突：（应该不需要了）

   npm install eslint-plugin-prettier eslint-config-prettier -D
   

   在ESlint配置文件中添加prettier插件：

     extends: [
       "plugin:vue/vue3-essential",
       "eslint:recommended",
       "@vue/typescript/recommended",
       "@vue/prettier",
       "@vue/prettier/@typescript-eslint",
       'plugin:prettier/recommended'
     ],
   

3. 最后就是根据需求配置ESlint文件了

---