这几天被eslint搞疯了 写代码一直报错 连代码格式化也起冲突 简直气的砸电脑
接下来教大家如何配置vscode和eslint一样的格式化规则:
首先要声明的是
1、目前还没找到插件可以自动配置和eslint一样的格式化规范 有的话请留言告诉我 让我也学习一下
2、每个人的eslint中都有自己加的规则 或者继承别的规则 所以每个人的配置都不大一样 我这边的配置代码时根据eslint的默认配置走的 不是按eslint默认配置走的可能要自己修改一些配置项
3、写这个配置之前需要安装三个插件(切记 不要 仅仅只装这三个美化工具 不要装beautiful之类的其他插件 会冲突)
ESLint
Vetur
Prettier - Code formatter
这三个插件能帮忙检查出当前代码中的错误 并高亮提示
然后就是配置
Windows为例 打开文件 -首选项-设置 搜索eslint
会出现右侧红框中内容 看清楚 不要点错 下面这个和他蛮像的
点击这个在setting.json中编辑 进到我们的配置页
全选配置项 删除 替换成我这个:
{
"editor.fontSize": 26,// 字体大小
"editor.tabSize": 2,// tab 空格数
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"files.associations": {
"*.vue": "vue"
},
"editor.codeActionsOnSave": { "source.fixAll.tslint":true },
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"html",
"vue"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"git.confirmSync": false,
"window.zoomLevel": 0,
"typescript.validate.enable": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",// HTML采用js-beautify-html这种方式格式化
"vetur.format.defaultFormatterOptions": {//选择哪种方式进行格式化并且该方式的格式化要写在对象里 写对象外无效
"js-beautify-html": {//HTML的格式化方式
"wrap_attributes": "force-expand-multiline"
// "wrap_attributes": "force-aligned" //属性强制折行对齐
},
"prettier": {//这行为js的格式化方式
"singleQuote": true,
"semi": false,
"trailingComma": "none"
},
"prettyhtml": {
"printWidth": 20,
"singleQuote": true,
"wrapAttributes": true,
"sortAttributes": false
}
},
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
"editor.snippetSuggestions": "top",
"eslint.codeAction.disableRuleComment": {
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.completion.scaffoldSnippetSources": {
},
"editor.wordWrap": "on",
"eslint.codeAction.showDocumentation": {
"enable": true
},
}
有几点 需要注意 :
1、这个是2020.09.12号的配置 如果时间久了 eslint配置可能会更新 有些配置项就会不通用
2、如果粘贴进去发现有些地方黄线警告 需要将该问题解决 否者 该配置项不起作用
另外在网上找了两篇别人的配置 配置项会比较多 也比较全 如果你有一些独特的配置是找不到的可以到这里面找 (注意 他们的有可能有别的插件专用的配置 这个要认清 仅做参考 )
{
// #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
"editor.formatOnSave": false,
//设置tab的缩进为2
"editor.tabSize": 2,
// #每次保存的时候将代码按eslint格式进行修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.run":"onSave",
"eslint.autoFixOnSave": false,
// #让prettier使用eslint的代码格式进行校验
// vscode 更新后已经统一使用editor.codeActionsOnsave
// #代码结尾加分号为好
"prettier.semi": true,
// #使用带引号替代双引号
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按"prettier"格式进行格式化
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分号
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"prettier.useTabs": true,
"files.autoSave": "off",
"explorer.confirmDelete": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},// 两个选择器中是否换行
//在vue文件里设置html关联
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"explorer.confirmDragAndDrop": false,
"terminal.integrated.rendererType": "dom",
"files.associations": {
"*.ejs":"html",
"*.vue":"html"
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages":{
"vue-html":"html",
"vue":"html"
}
}
还有一篇:
{
"editor.lineNumbers": "on", //开启行数提示
"editor.quickSuggestions": { //开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"prettier.useTabs": true,//使用制表符缩进
"editor.tabSize": 2, //制表符符号eslint
"editor.formatOnSave": true, //每次保存自动格式化
"prettier.semi": true, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.trailingComma": "none", //去除对象最末尾元素跟随的逗号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"prettier.printWidth": 200,//指定代码长度,超出换行
"prettier.requireConfig": true,//需要prettier.requireConfig格式化
"prettier.useEditorConfig": false,
"eslint.validate": [
//开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
"html",
"vue"
],
"terminal.integrated.rendererType": "dom",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
最后希望大家好好写代码 不行的话去送外卖 今天刚得到消息 一单外卖店家收款15元 其中给了9快给外卖配送的 外卖送一天赚350以上 咱码农才多少钱? 头发不值钱?