详解Vscode中使用Eslint终极配置大全
在vue项目中使用vscode编辑时，使用了如下这套配置，保存时就会根据既定vue项目中.eslintrc.js文件设置的既定规则自动校验并依据规则修复代码。
需安装插件
主要是这两个插件：
- ESLint
- Prettier-Codeformatter
vscode中setting.json中配置
{
//vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation":false,
//重新设定tabsize
"editor.tabSize":2,
//#每次保存的时候自动格式化
"editor.formatOnSave":true,
//#每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave":true,
//添加vue支持
"eslint.validate":[
"javascript",
"javascriptreact",
{
"language":"vue",
"autoFix":true
}
],
//#让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration":true,
//#去掉代码结尾的分号
"prettier.semi":false,
//#使用带引号替代双引号
"prettier.singleQuote":true,
//#让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis":true,
//#这个按用户自身习惯选择
"vetur.format.defaultFormatter.html":"js-beautify-html",
//#让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js":"vscode-typescript",
"vetur.format.defaultFormatterOptions":{
"js-beautify-html":{
"wrap_attributes":"force-aligned"
//#vue组件中html代码格式化样式
}
},
//格式化stylus,需安装Manta'sStylusSupremacy插件
"stylusSupremacy.insertColons":false,//是否插入冒号
"stylusSupremacy.insertSemicolons":false,//是否插入分好
"stylusSupremacy.insertBraces":false,//是否插入大括号
"stylusSupremacy.insertNewLineAroundImports":false,//import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks":false,
"window.zoomLevel":0//两个选择器中是否换行
}
vue项目中.eslintrc.js文件常用个性化配置
//https://eslint.org/docs/user-guide/configuring
module.exports={
root:false,
parserOptions:{
parser:'babel-eslint'
},
env:{
browser:true
},
extends:[
//https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
//considerswitchingto`plugin:vue/strongly-recommended`or`plugin:vue/recommended`forstricterrules.
'plugin:vue/essential',
//https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
//requiredtolint*.vuefiles
plugins:['vue'],
//addyourcustomruleshere
rules:{
//allowasync-await
'generator-star-spacing':'off',
//allowdebuggerduringdevelopment
'no-debugger':process.env.NODE_ENV==='production'?'error':'off',
eqeqeq:'off',//不能始用==
'no-unused-vars':'off',//消除未使用的变量
'no-undef':'off',//未使用变量报错
'no-unreachable':'off'//不能执行的代码检测
//此处一下还可以根据个人习惯设置更多个性化内容
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。