概要
在做项目时,如果是多人开发很容易由于代码风格的不同导致代码很影响观感,例如:有时候用双引号有时候用单引号等等,因此本文提供三个代码规范的做法,三个方法可同时使用
整体流程
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.配置.prettierignore 文件
/dist/*
/buuild/*
.local
/node_modules/**
**/.git
**/*.svn
**/*.hg
4.VSCode需要安装prettier的插件
5.VSCod中的配置保存就格式化文件
- 点击 设置,输入 格式化,将 Editor:Format On Save 选项勾选上即可
- 根据prettierignore文件
6.全局格式化 - 当需要对多个文件进行格式化时
- 配置命令,在命令行输入 npm run prettier
- 会直接格式化当前文件夹所有文件,除了prettierignore文件写入的内容
- 使用ESLint检测
在前面创建项目时选择了ESLint,Vue会默认帮助我们配置需要的ESLint环境。
使用:
1.插件安装
2.npm下载所需插件
npm install eslint-plugin-prettier eslint-config-prettier -D
3.在.eslintrc.cjs添加
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting',
'plugin:prettier/recommended'
]
- 如果想要eslint忽略某项检测,则在rules对象设置
- 例如:想要忽视声明但没取值的检测
小结
本文主要提供在项目创建时,如何对代码进行代码规范的做法,三个方法用处各不相同,可以同时使用
由于作者水平有限
如果对本文有任何疑问可以私信或者评论区发表你的看法
本文如果对你有帮助,麻烦点个赞和收藏方便回看,求关注 谢谢