团队开发的代码风格
开发同一个项目的团队,每个成员的代码风格都应该一致。
例如:
① JS 中的字符串,统一使用单引号表示
② 代码缩进,统一使用两个空格
③ 不允许出现 >2 个的连续空行
④ 语句结束,必须加分号
⑤ ......
注意,上述规则不是固定的。只是举例说明,比如我公司的项目,就要求语句结束加分号,也可以的。
只是说,一个团队的代码风格要统一而已。
如何保证代码风格统一
使用ESLint代码检查工具。
使用ESlint后,就会强制程序员使用规定的代码风格进行开发。
如果违反了规则,代码就会报错。
什么是 ESLint
官方概念:ESLint 是可组装的 JavaScript 和 JSX 检查工具。
通俗理解:一个工具,用来约束团队成员的代码风格。
ESLint有什么好处
保证团队协作开发时,编写出来的代码风格保持一致。
项目中如何使用ESLint检查代码风格
当通过 @vue/cli 脚手架工具安装项目后,默认已经将eslint安装并配置好了。
我们将使用 vue的eslint插件规定的默认规则 进行代码检查,注意不是eslint官方的默认规则。
如果需要修改规则,则可以查看官方网站。
演示如何配置ESlint
下面演示的两个配置,必须配置。和后面的vscode设置有关。
关于ESLint的配置,需要放到配置文件中。
关于ESLint的配置文件,官方有详细的说明,当然很详细(Luo Suo)
对于一个项目,ESLint的配置项:
- 要么放到 跟目录的
.eslintrc.js
中;如果你用的 @vue/cli@4.5.x 创建的项目就是这样的 - 要么放到 根目录的
package.json
中的eslintConfig
节点中;如果你用的是 @vue/cli5.0.x 创建的项目就是这样的
无论是上述那个文件文件,我们找到里面的 rules
节点,这个 rules
节点,就是配置ESLint规则的
比如,我们配置每条语句结束,不能加分号,则需要在 rules
节点中加入如下规则:
"rules": {
"semi": ["error", "never"]
}
修改了配置文件,需要重启项目(终端窗口要 重新 npm run serve)
比如,配置“函数名”和“小括号”之间是否需要加空格,则需要在rules
节点加入如下规则:
"rules": {
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}
]
}
修改了配置文件,需要重启项目(终端窗口要 重新 npm run serve)
上述规则的解释:
"anonymous": "always" 匿名函数小括号前,需要空格。比如 setTimeout(function () {})
"named": "never" 有名字的方法,不需要空格。比如 abc() {}
"asyncArrow": "always" 箭头函数,需要空格。比如 aaaa(async data => {})
测试
打开 src/App.vue
,在JS代码中,随便一个语句结束的位置,加一个分号试试,看终端或浏览器是否有报错提示。
import HelloWorld from './components/HelloWorld.vue'
let a = 2
console.log(a); // 这里加了一个分号
export default {
name: 'App',
components: {
HelloWorld
},
methods: {
add() {}
}
}
去掉代码中的分号,再试试。
这样,以后再写代码,大家就必须使用一致的代码风格了。
vscode插件配置
需要安装和卸载的插件
1. 需要卸载的插件
○JS-CSS-HTML Formatter
○Beautify
○还有其他格式化代码的插件
卸载是为了为了避免冲突
2. 需要安装的插件
- 路径补全插件,vue中使用
- Path Intellisense
- Path Intellisense - Visual Studio Marketplace
-
- 代码格式化插件(自动调整代码格式的)
Prettier - Code formatter
Prettier - Code formatter - Visual Studio Marketplace - Vue语法提示插件(自动补全vue语法的)
Vue 3 Snippets - Vue 3 Snippets - Visual Studio Marketplace
- ElementUI代码补全插件(后面用到的一个组件库)
Element UI Snippets - Element UI Snippets - Visual Studio Marketplace
- 代码格式检查工具(很重要)
ESLint
ESLint - Visual Studio Marketplace - Vue语法格式化插件,vue文件代码高亮插件
Vetur
Vetur - Visual Studio Marketplace
- 代码格式化插件(自动调整代码格式的)
插件安装小结
- 如果你自己明白你的插件是干什么的,你就把上述插件安装了即可
- 如果你自己不明白自己的插件是干什么的了,那就把插件都卸载了,安装如下图所示的插件即可
为什么需要安装ESLint插件
前面的项目已经使用ESLint检查我们的代码了。
但是,写代码的时候,难免会“写错”,并不是真的写错代码,只是不符合项目的规定。
这种“写错”,vscode并没有提示。
安装vscode的ESlint插件后,当我们“写错”代码的时候,vscode会给我们提示。
插件安装后,需要配置。关于配置,详见后面的vscode插件配置
为什么需要Prettier格式化代码插件
格式化代码,就是把 格式不好的代码,自动转成 符合要求的格式。
而 Prettier 插件,可以和 ESLint 配合到一起。
也就是说,使用 Prettier 格式化后的代码,刚好是符合ESlint要求的。
插件安装后,需要配置。关于配置,详见后面的vscode插件配置
配置ESlint和Prettier插件
注意,这里配置ESlint,指的是配置vscode的一个叫做ESlint的插件。
打开vscode设置(快捷键 Ctrl + ,
),即可打开vscode设置界面。
点击设置界面右上角的 “打开设置(json)”图标:
打开后,你会看到结构如下的代码:
注意,只是结构一样,由于大家的vscode设置各有千秋,所以代码并不一定一样。
{
// =====================================================
// 一会将代码复制到这里
// =====================================================
"workbench.iconTheme": "helium-icon-theme",
"workbench.colorTheme": "laotang dark",
"files.autoSave": "onFocusChange",
"editor.fontFamily": "Menlo, 'Fira Code', 'FuraMono NF', Monaco, monospace, 'Courier New'",
"editor.formatOnPaste": true,
"editor.minimap.enabled": false,
"[markdown]": {
"editor.quickSuggestions": true
}
}
将下面的配置代码,复制到上述指定的位置。
// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\xiafan\\.prettierrc",
// ---------------------------------------
// 路径提示
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
// ---------------------------------------
// 开启编辑器的保存自动格式化功能
"editor.formatOnSave": true,
// ESLint 插件的配置
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// ---------------------------------------
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 100,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"prettier.semi": false,
// ---------------------------------------
// 设置 .vue 文件中,HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 忽略警告信息
"vetur.ignoreProjectWarning": true,
// 防止自动导入
"vetur.completion.autoImport": false,
// 不验证 .vue 组件的模板结构
"vetur.validation.template": false,
// vetur 默认的格式化配置项
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
"printWidth": 100
},
"js-beautify-html": {
"wrap_attributes": false
}
},
// ---------------------------------------
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.tabSize": 2,
复制后,如果有重复的配置项,是保留原来的配置项,还是删除看具体配置自行决定
配置 Prettier
下载配置文件
下载如下文件:
百度网盘链接:https://pan.baidu.com/s/1evelaVPEu0QWA9Rf1G_g-w
提取码:lusj
解压后,得到 .prettierrc
。
放到指定的位置
- Windows系统,将
.prettierrc
文件,放到C:/Users/你的用户名
文件夹(Users就是用户)。 - Mac系统,
.prettierrc
文件是一个隐藏文件,需要按Command + Shift + .
显示隐藏文件,然后打开访达,点击顶部菜单栏的前往,打开个人(画小房子图标)文件夹,将.prettierrc
复制到 个人 文件夹。
修改vscode设置
修改vscode的配置文件,将配置中的第一条配置的路径修改一下
- Windows系统修改为
"prettier.configPath": "C:\\Users\\LaoTang\\.prettierrc"
- Mac系统修改为
"prettier.configPath": "~/.prettierrc"
示例如下:
配置默认的格式化程序
配置JS文件和VUE文件的默认格式化程序
打开任意一个JS文件,鼠标右键,选择“使用...格式化”,在出现的菜单中,选择“配置默认的格式化程序”,选择“Prettier - Code formatter”
打开任意一个VUE文件,鼠标右键,选择“使用...格式化”,在出现的菜单中,选择“配置默认的格式化程序”,选择“Prettier - Code formatter”
测试
这样配置后。
当我们写代码的时候,如果代码格式不符合ESLint的要求,就会提示错误;
当我们保存代码的时候,如果有不符合ESLint要求的代码,Prettier 插件会自动将代码格式化成符合要求的
大家可以自行测试。