使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
先安装插件.Vetur+ Prettier + ESlint
1、ESlint设置
文件.eslintrc.js中的配置
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
//强制使用单引号
quotes: ['error', 'single'],
//强制不使用分号结尾
semi: ['error', 'never']
}
}
2、Prettier设置
文件prettier.config.js或者prettierrc.js
module.exports = {
// tab缩进大小,默认为2
tabWidth: 2,
// 使用tab缩进,默认false
useTabs: false,
// 使用分号, 默认true
semi: false,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
singleQuote: true,
// 行尾逗号,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
TrailingCooma: 'none',
// 对象中的空格 默认true
// true: { foo: bar }
// false: {foo: bar}
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设置以后全部保存,即可。