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

本文是开启eslint检验和配置eslint格式化；如果想要关闭eslint，查看这篇关闭eslint方法；

1.必须安装的三个插件eslint， prettier-Code formatter ，vetur
在这里插入图片描述

2.配置setting.json
在这里插入图片描述

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

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

最好直接复用下面的配置，里面有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//自动保存的时候，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+","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"},// 当保存代码的饿时候，会自动格式化"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 文件，此文件会用来在保存时候做eslint校验，具体配置网上很多可参考此篇，

配置规则详解：


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

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

我的配置如下：

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

如图：在这里插入图片描述

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

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