0
点赞
收藏
分享

微信扫一扫

使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式

hoohack 2022-06-22 阅读 72

使用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-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式_html

 

{
//.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设置以后全部保存,即可。

 

龙腾一族至尊龙骑

举报

相关推荐

0 条评论