VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““

本文是开启eslint检验和配置eslint格式化&＃xff1b;如果想要关闭eslint&＃xff0c;查看这篇关闭eslint方法&＃xff1b;

1.必须安装的三个插件eslint&＃xff0c; prettier-Code formatter &＃xff0c;vetur

2.配置setting.json

3.直接将下方代码复制&＃xff0c;黏贴在setting.json文件中
ctrl&＃43;s保存时候&＃xff0c;自动格式化&＃43;无分号&＃43;单引号&＃xff1a;取决于 这三个设置

// 当保存代码的时候&＃xff0c;会自动格式化"editor.formatOnSave": true,// 不添加分号"prettier.semi": false,// 使用单引号"prettier.singleQuote": true,


最好直接复用下面的配置&＃xff0c;里面有eslint检验和自动修改配置

{"editor.quickSuggestions": {"strings": true},"window.zoomLevel": 1,"[Javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},"[css]": {"editor.defaultFormatter": "michelemelluso.code-beautifier"},"files.autoSave": "afterDelay","editor.suggestSelection": "first","vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue","[html]": {"editor.defaultFormatter": "HookyQR.beautify"},// 本地配备eslint//自动保存的时候&＃xff0c;eslint自动修复一些格式上的错误"eslint.alwaysShowStatus": true,"eslint.autoFixOnSave": true,// 每次保存的时候将代码按eslint格式进行修复"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.options": {"extensions": [".js",".vue"]},"eslint.validate": ["Javascript",{"language": "vue","autoFix": true},"html","vue"],"emmet.includeLanguages": {"Javascript": "html","wxml": "html"},"git.autofetch": true,"[vue]": {"editor.defaultFormatter": "octref.vetur"},"workbench.colorTheme": "Default Dark&＃43;","workbench.colorCustomizations": {},// 关闭eslint// "eslint.enable": false,// tab一键成元素html标签"emmet.triggerExpansionOnTab": true,"files.associations": {"*.cjson": "jsonc","*.wxss": "css","*.wxs": "Javascript"},"minapp-vscode.disableAutoConfig": true,"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 当保存代码的饿时候&＃xff0c;会自动格式化"editor.formatOnSave": true,// 不添加分号"prettier.semi": false,// 使用单引号"prettier.singleQuote": true,// 解决Vue换行问题"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.defaultFormatter.js": "vscode-typescript",//解决配置默认格式化 js换行问题"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
}

4.在你的项目下配置 .eslintrc.js 文件&＃xff0c;此文件会用来在保存时候做eslint校验&＃xff0c;具体配置网上很多可参考此篇&＃xff0c;

配置规则详解&＃xff1a;


rules: {"规则名": [规则值, 规则配置]
}

其中规则值有以下3种&＃xff1a;0 &＃61; off, 1 &＃61; warn, 2 &＃61; error
"off"或者0 //关闭规则关闭
"warn"或者1 //在打开的规则作为警告&＃xff08;不影响退出代码&＃xff09;
"error"或者2 //把规则作为一个错误&＃xff08;退出代码触发时为1&＃xff09;

我的配置如下&＃xff1a;

module.exports &＃61; {root: true,parserOptions: {parser: &＃39;babel-eslint&＃39;,sourceType: &＃39;module&＃39;},env: {browser: true,node: true,es6: true,},extends: [&＃39;plugin:vue/recommended&＃39;, &＃39;eslint:recommended&＃39;],// add your custom rules here//it is base on https://github.com/vuejs/eslint-config-vuerules: {"vue/max-attributes-per-line": [2, {"singleline": 10,"multiline": {"max": 1,"allowFirstLine": false}}],"vue/singleline-html-element-content-newline": "off","vue/multiline-html-element-content-newline": "off","vue/name-property-casing": ["error", "PascalCase"],"vue/no-v-html": "off",&＃39;accessor-pairs&＃39;: 2,&＃39;arrow-spacing&＃39;: [2, {&＃39;before&＃39;: true,&＃39;after&＃39;: true}],&＃39;block-spacing&＃39;: [2, &＃39;always&＃39;],&＃39;brace-style&＃39;: [2, &＃39;1tbs&＃39;, {&＃39;allowSingleLine&＃39;: true}],&＃39;camelcase&＃39;: [0, {&＃39;properties&＃39;: &＃39;always&＃39;}], //强制驼峰法命名 - 关闭&＃39;comma-dangle&＃39;: [2, &＃39;never&＃39;],&＃39;comma-spacing&＃39;: [2, {&＃39;before&＃39;: false,&＃39;after&＃39;: true}],&＃39;comma-style&＃39;: [2, &＃39;last&＃39;],&＃39;constructor-super&＃39;: 2,&＃39;curly&＃39;: [2, &＃39;multi-line&＃39;],&＃39;dot-location&＃39;: [2, &＃39;property&＃39;],&＃39;eol-last&＃39;: 0, //文件以单一的换行符结束 - 打开&＃39;eqeqeq&＃39;: ["error", "always", {"null": "ignore"}], //必须使用全等 0关 1警告 2或者error错误&＃39;generator-star-spacing&＃39;: [2, {&＃39;before&＃39;: true,&＃39;after&＃39;: true}],&＃39;handle-callback-err&＃39;: [2, &＃39;^(err|error)$&＃39;],&＃39;indent&＃39;: [2, 2, {&＃39;SwitchCase&＃39;: 1}],&＃39;jsx-quotes&＃39;: [2, &＃39;prefer-single&＃39;],&＃39;key-spacing&＃39;: [2, {&＃39;beforeColon&＃39;: false,&＃39;afterColon&＃39;: true}],&＃39;keyword-spacing&＃39;: [2, {&＃39;before&＃39;: true,&＃39;after&＃39;: true}],&＃39;new-cap&＃39;: [2, {&＃39;newIsCap&＃39;: true,&＃39;capIsNew&＃39;: false}],&＃39;new-parens&＃39;: 2,&＃39;no-array-constructor&＃39;: 2,&＃39;no-caller&＃39;: 2,&＃39;no-console&＃39;: &＃39;off&＃39;,&＃39;no-class-assign&＃39;: 2,&＃39;no-cond-assign&＃39;: 2,&＃39;no-const-assign&＃39;: 2, //禁止修改const声明的变量 - 开启&＃39;no-control-regex&＃39;: 0,&＃39;no-delete-var&＃39;: 2,&＃39;no-dupe-args&＃39;: 2,&＃39;no-dupe-class-members&＃39;: 2,&＃39;no-dupe-keys&＃39;: 2,&＃39;no-duplicate-case&＃39;: 2,&＃39;no-empty-character-class&＃39;: 2,&＃39;no-empty-pattern&＃39;: 2,"no-empty": 0, //块语句中的内容不能为空 - 关闭&＃39;no-eval&＃39;: 2,&＃39;no-ex-assign&＃39;: 2,&＃39;no-extend-native&＃39;: 2,&＃39;no-extra-bind&＃39;: 2,&＃39;no-extra-boolean-cast&＃39;: 2,&＃39;no-extra-parens&＃39;: [2, &＃39;functions&＃39;],&＃39;no-fallthrough&＃39;: 2,&＃39;no-floating-decimal&＃39;: 2,&＃39;no-func-assign&＃39;: 2,&＃39;no-implied-eval&＃39;: 2,&＃39;no-inner-declarations&＃39;: [2, &＃39;functions&＃39;],&＃39;no-invalid-regexp&＃39;: 2,&＃39;no-irregular-whitespace&＃39;: 2,&＃39;no-iterator&＃39;: 2,&＃39;no-label-var&＃39;: 2,&＃39;no-labels&＃39;: [2, {&＃39;allowLoop&＃39;: false,&＃39;allowSwitch&＃39;: false}],&＃39;no-lone-blocks&＃39;: 2,&＃39;no-mixed-spaces-and-tabs&＃39;: 2,&＃39;no-multi-spaces&＃39;: 2,&＃39;no-multi-str&＃39;: 2,&＃39;no-multiple-empty-lines&＃39;: [2, {&＃39;max&＃39;: 1}],&＃39;no-native-reassign&＃39;: 2,&＃39;no-negated-in-lhs&＃39;: 2,&＃39;no-new-object&＃39;: 2,&＃39;no-new-require&＃39;: 2,&＃39;no-new-symbol&＃39;: 2,&＃39;no-new-wrappers&＃39;: 2,&＃39;no-obj-calls&＃39;: 2,&＃39;no-octal&＃39;: 2,&＃39;no-octal-escape&＃39;: 2,&＃39;no-path-concat&＃39;: 2,&＃39;no-proto&＃39;: 2,&＃39;no-redeclare&＃39;: 2,&＃39;no-regex-spaces&＃39;: 2,&＃39;no-return-assign&＃39;: [2, &＃39;except-parens&＃39;],&＃39;no-self-assign&＃39;: 2,&＃39;no-self-compare&＃39;: 2,&＃39;no-sequences&＃39;: 2,&＃39;no-shadow-restricted-names&＃39;: 2,&＃39;no-spaced-func&＃39;: 2, //函数调用时 函数名与()之间不能有空格 - 开启&＃39;no-sparse-arrays&＃39;: 2,&＃39;no-this-before-super&＃39;: 2,&＃39;no-throw-literal&＃39;: 2,&＃39;no-trailing-spaces&＃39;: 2,&＃39;no-undef&＃39;: 2, //不能有未定义的变量 - 打开&＃39;no-undef-init&＃39;: 2,&＃39;no-unexpected-multiline&＃39;: 2,&＃39;no-unmodified-loop-condition&＃39;: 2,&＃39;no-unneeded-ternary&＃39;: [2, {&＃39;defaultAssignment&＃39;: false}],&＃39;no-unreachable&＃39;: 2,&＃39;no-unsafe-finally&＃39;: 2,&＃39;no-unused-vars&＃39;: [2, {&＃39;vars&＃39;: &＃39;all&＃39;,&＃39;args&＃39;: &＃39;none&＃39;}], //不能有声明后未被使用的变量或参数 0关 1警告 2声明不使用就爆红"vue/html-self-closing": [&＃39;error&＃39;, {"html": {"void": "never","normal": "any","component": "any"},"svg": "always","math": "always"}], //html使用单闭合标签 -打开&＃xff08;配置&＃xff1a;在html中never从不开启&＃xff09;&＃39;no-useless-call&＃39;: 2,&＃39;no-useless-computed-key&＃39;: 2,&＃39;no-useless-constructor&＃39;: 2,&＃39;no-useless-escape&＃39;: 0,&＃39;no-whitespace-before-property&＃39;: 2,&＃39;no-with&＃39;: 2,&＃39;one-var&＃39;: [2, {&＃39;initialized&＃39;: &＃39;never&＃39;}],&＃39;operator-linebreak&＃39;: [2, &＃39;after&＃39;, {&＃39;overrides&＃39;: {&＃39;?&＃39;: &＃39;before&＃39;,&＃39;:&＃39;: &＃39;before&＃39;}}],&＃39;padded-blocks&＃39;: [2, &＃39;never&＃39;],&＃39;quotes&＃39;: [2, &＃39;single&＃39;, {&＃39;avoidEscape&＃39;: true,&＃39;allowTemplateLiterals&＃39;: true}],&＃39;semi&＃39;: [2, &＃39;never&＃39;],&＃39;semi-spacing&＃39;: [2, {&＃39;before&＃39;: false,&＃39;after&＃39;: true}],&＃39;space-before-blocks&＃39;: [2, &＃39;always&＃39;],&＃39;space-before-function-paren&＃39;: [0, &＃39;never&＃39;], //函数定义时括号前面要不要有空格&＃xff1a;设置为0就是关闭这个规则的检验 1就是如不符合规则就警告 2就是如不符合就报错 --至于保存代码时候 是否会生成空格 这个取决于你设置的代码风格&＃xff08;例如prettier&＃xff09;&＃39;space-in-parens&＃39;: [2, &＃39;never&＃39;],&＃39;space-infix-ops&＃39;: 2,&＃39;space-unary-ops&＃39;: [2, {&＃39;words&＃39;: true,&＃39;nonwords&＃39;: false}],&＃39;spaced-comment&＃39;: [2, &＃39;always&＃39;, {&＃39;markers&＃39;: [&＃39;global&＃39;, &＃39;globals&＃39;, &＃39;eslint&＃39;, &＃39;eslint-disable&＃39;, &＃39;*package&＃39;, &＃39;!&＃39;, &＃39;,&＃39;]}],&＃39;template-curly-spacing&＃39;: [2, &＃39;never&＃39;],&＃39;use-isnan&＃39;: 2,&＃39;valid-typeof&＃39;: 2,&＃39;wrap-iife&＃39;: [2, &＃39;any&＃39;],&＃39;yield-star-spacing&＃39;: [2, &＃39;both&＃39;],&＃39;yoda&＃39;: [2, &＃39;never&＃39;],&＃39;prefer-const&＃39;: 0, //首选const -- 关闭&＃39;no-debugger&＃39;: process.env.NODE_ENV &＃61;&＃61;&＃61; &＃39;production&＃39; ? 2 : 0,&＃39;object-curly-spacing&＃39;: [2, &＃39;always&＃39;, {objectsInObjects: false}],&＃39;array-bracket-spacing&＃39;: [2, &＃39;never&＃39;]}
}

如图&＃xff1a;

**5.正常情况&＃xff0c;到步骤4即可自动保存做eslint校验&＃xff1b;如果无效&＃xff0c;1.可能是eslint未打开&＃xff0c;未打开时候代码是不会报错的&＃xff1a; **
查看是否打开&＃xff0c;以及打开方式&＃xff1a;
2.如果eslint图标是感叹号&＃xff0c;则是因为项目根目录外面还套了个文件夹&＃xff0c;且用vscode打开&＃xff0c;则会出现该问题&＃xff1b;直接把项目根目录拖进vscode就可以解决了&＃xff01; 不要用套了文件夹的文件直接打开

3.如果以上eslint和配置都打开了 &＃xff0c;代码不报红&＃xff0c;但是页面还是报错启动不了&＃xff0c;那就重新启动一次项目即可

6.ctrl &＃43; s保存自动处理错误&＃xff1a;

7.最后提交代码时候&＃xff0c;最好再次检查下&＃xff0c;针对具体错误在手动修改&＃xff1a;检查命令 npm run lint

有用就点个赞吧&＃xff01;