1. 需要一致性的原因
在前端项目的编写过程中， 团队成员的代码习惯， 编写习惯不太一致。 有的人喜欢用代码格式化快捷键， 有的人喜欢手动更改代码格式。 会造成代码风格差异太大。 如果不同人改了同一个文件。 后期维护成本会比较高。
结合网上各种方案，现在梳理出的方案是 eslint + prettier方案规范前端代码。
下面以mac 下的vscode为例说明
2. prettier的使用
- 安装
- 插件安装: 插件商店搜索
prettier安装Prettier - Code formatter - 命令安装:
npm install prettier --save-dev
- 在根目录(跟package.json相同目录), 新建
.prettierrc文件。 在文件中进行配置。 如果团队项目有需要更改的地方再配。 否则不必配， 默认配置已经很完善了
{
"semi": true, // 值为false或true 在语句的末尾打印分号。 默认true
"singleQuote": false, // 使用单引号而不是双引号 默认false
"tabWidth": 2, // 指定每个缩进级别的空格数 默认2
"printWidth": 80, // 最大行长 默认80
"tabWidth": 2, // 指定每个缩进级别的空格数 默认2
"bracketSpacing": true, // 对象或数组是否追加空格, {foo: xx}还是{ foo: xx } 默认true
"trailingComma": "none", // 对象最后一项不加逗号, 还有'all'为加逗号, 默认es5。
}
- 更改默认的格式化插件。 鼠标右键
使用...格式化文档=> 将Prettier - Code formatter设为默认值
上面设置完毕后。 即可格式化代码的时候， 按照.prettierrc配置的功能进行格式化代码了。 cmd + shift + f 为格式化快捷键
4(可选). 保存自动格式化代码。
在settings.json中添加如下代码 (cmd + shift + p, 然后选 首选项:打开设置(json)Preferences: Open Settings(JSON) )
"editor.formatOnSave": true
3. 运行
- 执行格式化
prettier --config .prettierrc位置 --write 需要格式化的文件 - 基础用法
prettier --config ./.prettierrc --write ./src/views/testPage/t2.vue - 扩展用法(自定义文件配置以及格式化vue文件)
prettier --config ./pre.js --write ./index.vue
4. 在package.json中添加命令， 执行npm run prettier, 会对src目录下后缀为.vue的文件进行代码格式
"prettier": "prettier --write \"src/**/*.vue\" \"src/**/*.js\"",
