自動eslint格式校驗

前言

看同事用vscode保存代碼都自動進行格式校驗，且符合eslint規則。
於是開始了我的十萬個爲什麼？

vscode保存不自動校驗格式
Prettier - Code formatter不生效
Prettier格式校驗和eslint衝突規則不一致

結果

搜了個遍也沒有滿意答案，後來發現是編輯器首選項的設置問題。
文件-首選項-設置

參考

https://blog.csdn.net/weixin_36222137/article/details/80040758

滿意的首選項

{
    "editor.fontSize": 22, // 字體大小
    "workbench.colorTheme": "greenery", // 工作臺主題顏色
    "editor.minimap.enabled": false, //關閉快速預覽
    "editor.formatOnSave": true, //每次保存自動格式化
    "editor.codeActionsOnSave": { // 每次保存的時候將代碼按eslint格式進行修復
        "source.fixAll.eslint": true
    },
    // "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //讓函數(名)和後面的括號之間加個空格 好像註釋了也可以
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //讓vue中的js按編輯器自帶的ts格式進行格式化
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // "wrap_attributes": "force-aligned" //屬性強制折行對齊 那個html文件巨長了就
        }
    },
    "editor.wordWrap": "on", // 控制折行方式 - "on" (根據視區寬度折行)
    // "vetur.colorDecorators.enable": false,
    "editor.colorDecorators": false, // 控制編輯器是否顯示內聯顏色修飾器和顏色選取器。
    "editor.snippetSuggestions": "top", // 將建議的代碼段優先級提前選擇，比如輸入for第一個提示是for循環代碼段。
    "files.associations": { // 文件關聯語言的優先級配置
        "*.vue": "vue",
        "*.cshtml": "html",
        "*.js": "javascript",
        "*.dwt": "html"
    }
}