VSCode符合ESlint的格式化方法——2020更新配置代碼

前言

VSCode 在經歷了一番猛烈的升級以后，用戶自定義文件settings.json又有了比較大的改動，許多插件的首頁也寫了相關的設置變更方法。

此文是在另一位大大的博客基礎上的修改了用戶設置的代碼，剔除了報錯的部分和過時的部分

感謝大大！

---

2020.03.27更新：npm報錯是我自己的電腦bug，如果遇到npm報錯直接卸載重裝！！！不要試圖按照軟件的提示修復了，都是無用的掙扎...

步驟

1. 根據 https://www.cnblogs.com/zhoudawei/p/11198781.html 下載相應插件和打開配置文件

2. 修改最后的代碼如下：

（如果之前settings.json里面已經有代碼，請去掉下面這段代碼最外面的大括號{}）

{
    // #值設置為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"
    }
}

ps.本文的變動效果是使得VSCode不會報錯，之前的功能是否能夠如實生效，敬請自行測試orz
ps2.這些設置添加進Vscode之后有些顯示是灰色的，可能是無效的配置，可以試一下刪掉（但是有一些配置我確實是按照官方說明寫的，迷惑...）

補充遇到問題及其解決方法

使用ESlint插件可能會遇到無法加載的問題：

會提示你使用npm手動安裝，那么手動安裝一下：
0. 首先把本機的Node.js卸載...

1. 下載Node.js並安裝。（題主是很久以前下載的了，具體怎么安裝百度下吧）
2. 打開終端。注意這個時候輸入npm install eslint -g很有可能會一直卡在下載界面一動不動。正確的方法是更換淘寶源
3. 輸入npm config set registry https://registry.npm.taobao.org換源，之后輸入npm config get registry查看是否配置成功
4. 輸入npm install eslint -g安裝ESLint。

后續可能還有問題，等題主搞清楚了eslint再更新orz