概要
在做项目时，如果是多人开发很容易由于代码风格的不同导致代码很影响观感，例如：有时候用双引号有时候用单引号等等，因此本文提供三个代码规范的做法，三个方法可同时使用
整体流程
1.创建完成项目后
2.配置editorconfig文件
3.使用Prettier工具
4.使用ESLint检测
使用方法
- 集成editorconfig配置
- EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
- 使用
在使用时，VSCode需要安装一个插件：EditorConfig for VS Code
在工作目录下创建.editorconfig文件
# 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
- 使用Prettier工具
- Prettier用于代码格式化工具，前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。
使用：
1.安装prettier，如果创建vue项目时，已经选择Prettier则可以不用下载
npm install prettier -D
2.配置.prettierrc文件：
- useTabs：使用tab缩进还是空格缩进，选择false；
- tabWidth：tab是空格的情况下，是几个空格，选择2个；
- printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
- singleQuote：使用单引号还是双引号，选择true，使用单引号；
- trailingComma：在多行输入的尾逗号是否添加，设置为
none，比如对象类型的最后一个属性后面是否加一个，； - semi：语句末尾是否要加分号，默认值true，选择false表示不加；
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
3.VSCode需要安装prettier的插件
5.VSCod中的配置
点击鼠标右键后，点击使用…格式化文档
将格式化默认值为Prettier即可，使用shit+alt+F就可以格式化代码
- 使用ESLint检测
1.在前面创建项目时选择了ESLint，Vue会默认帮助我们配置需要的ESLint环境。
使用：
1.插件安装
2.npm下载所需插件
npm install eslint-plugin-prettier eslint-config-prettier -D
3.添加prettier插件
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
'plugin:prettier/recommended'
],
- 如果想要eslint忽略某项检测，则在rules对象设置
- 例如：想要忽视声明但没取值的检测
小结
本文主要提供在项目创建时，如何对代码进行代码规范的做法，三个方法用处各不相同，可以同时使用
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助，麻烦点个赞和收藏方便回看，求关注 谢谢
