本文是開啟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和配置都打開了 ，代碼不報紅，但是頁面還是報錯啟動不了，那就重新啟動一次項目即可

6.ctrl + s保存自動處理錯誤：

7.最后提交代碼時候，最好再次檢查下，針對具體錯誤在手動修改：檢查命令 npm run lint

有用就點個贊吧！

總結

以上是生活随笔為你收集整理的VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。