使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
先安装插件.Vetur+ Prettier + ESlint
1、ESlint设置
文件.eslintrc.js中的配置
1 module.exports = {
2 root: true,
3 env: {
4 node: true
5 },
6 'extends': [
7 'plugin:vue/essential',
8 'eslint:recommended'
9 ],
10 parserOptions: {
11 parser: 'babel-eslint'
12 },
13 rules: {
14 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16 //强制使用单引号
17 quotes: ['error', 'single'],
18 //强制不使用分号结尾
19 semi: ['error', 'never']
20 }
21 }
2、Prettier设置
文件prettier.config.js或者prettierrc.js
module.exports = {
// tab缩进大小,默认为2
tabWidth: 2,
useTabs: false,
// 使用分号, 默认true
semi: false,
// 使用单引号,
singleQuote: true,
// 行尾逗号,
TrailingCooma: 'none',
// 空格
bracketSpacing: true,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
arrowParens: 'always',
}
3、Vetur设置,
在文件--首选项-设置 (ctr+,)打开,可以手动去设置选项,
也可以直接点击搜索框最后面的位置 “打开设置(json)”打开,使用json格式来编辑设置选项,
自动生成的就是 settings.json
{
//.vue文件template格式化支持,并使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
//js-beautify-html格式化配置,属性换行不强制、每行120字符
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
"vetur.format.defaultFormatter.js": "prettier",
//根据文件后缀名定义vue文件类型
"files.associations": {
"*.vue": "vue"
},
//配置 ESLint 检查的文件类型
"eslint.validate": ["javascript", "javascriptreact"],
//保存自动格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
//保存时eslint自动修复错误
"source.fixAll.eslint": true
}
}
4、上述设置Vetur+ Prettier + ESlint设置以后全部保存,即可。
龙腾一族至尊龙骑