vscode 插件
- Prettier - Code formatter
- vetur
settings.json 重要配置(文件-首选项-设置)
1"editor.formatOnSave": true, //按保存键时触发格式化
2"files.autoSave": "off",//不自动保存,按保存键触发格式化
3"eslint.alwaysShowStatus": true,//编辑器下面显示eslint的状态栏,!!!如果显示禁用要点击下开启,不开启eslint编辑器不报错提醒
4//语言格式化配置,分多条写如[javascript]:{}
5"[javascript|vue|html|typescript|html|scss|css]": {
6 "editor.defaultFormatter": "esbenp.prettier-vscode"
7},
vscode 设置
- 编辑窗口右键 format document with…
- configure default formatter
- 选中 prettier
package.json 相关包
- “@vue/cli-plugin-babel”: “^4.4.0”, //cli 工具初始化自带
- “@vue/cli-plugin-eslint”: “~4.5.0”, //cli 工具初始化自带
- “babel-eslint”: “^10.1.0”, //cli 工具初始化自带
- “eslint”: “^6.7.2”, //cli 工具初始化自带
- “eslint-plugin-vue”: “^6.2.2”, //cli 工具初始化自带
- “eslint-config-prettier”: “^6.12.0”,
- “eslint-plugin-prettier”: “^3.1.4”
规则配置
- eslint(语法规则检测)见 .eslintrc.js (在
rules:{'prettier/prettier': 'error'}
开启 prettier)
- prettier(代码格式化)见 .prettierrc.js
.eslintrc.js 参考
1module.exports = {
2 root: true,
3 parserOptions: {
4 parser: 'babel-eslint'
5 },
6 env: {
7 browser: true,
8 es6: true,
9 node: true
10 },
11 extends: [
12 'plugin:vue/essential', //https://eslint.vuejs.org/rules/
13 'eslint:recommended', //https://eslint.bootcss.com/docs/rules/
14 'plugin:prettier/recommended'
15 ],
16 // required to lint *.vue files
17 plugins: ['vue'],
18 // add your custom rules here
19 rules: {
20 'prettier/prettier': 'error',
21 'no-unused-vars': 'error',
22 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
23 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
24 }
25};
26
.prettierrc.js 参考
1module.exports = {
2 // tab缩进大小,默认为2
3 tabWidth: 4,
4 // 超过最大值换行 默认80(项目实践出结果)
5 printWidth: 120,
6 // 使用tab缩进,默认false
7 useTabs: false,
8 // 句尾添加分号
9 semi: true,
10 // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)(项目实践出结果)
11 singleQuote: true,
12 // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
13 proseWrap: 'preserve',
14 // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号 always 总是有括号
15 arrowParens: 'always',
16 // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
17 bracketSpacing: true,
18 // 结尾是 \n \r \n\r auto
19 endOfLine: 'auto',
20 htmlWhitespaceSensitivity: 'ignore',
21 // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
22 ignorePath: '.prettierignore',
23 // Require a "prettierconfig" to format prettier
24 requireConfig: false,
25 // 行尾逗号,默认none,可选 none|es5|all {name: 'audaque'}
26 // es5 包括es5中的数组、对象
27 // all 包括函数对象等所有可选
28 trailingComma: 'none'
29};
30
换行符 crlf、lf 处理
- Ensure Prettier’s endOfLine option is set to lf (this is a default value since v2.0.0) 能够检查出来那里不是 lf,但是不能纠正
- Configure a pre-commit hook that will run Prettier 提交前检查
- Configure Prettier to run in your CI pipeline using –check flag. If you use Travis CI, set the autocrlf option to input in .travis.yml.
git config --global core.autocrlf input
能够在提交到 git 仓库转化为 lf,下载时不转化
- Add
* text=auto eol=lf
to the repo’s .gitattributes file. You may need to ask Windows users to re-clone your repo after this change to ensure git has not converted LF to CRLF on checkout.
- 安装 vscode 插件 EditorConfig for VS Code ,配置.editorconfig ,保存时能够自动更正换行符
评论