ESlint + VSCode自動格式化代碼(2020)

更多文章

本文用 Vue 項目作示範。利用 Vue CLI 建立項目時要將 ESlint 選上，下載完依賴後，用 VSCode 打開項目。安裝插件 ESLint，而後 File -> Preference -> Settings（若是裝了中文插件包應該是文件 -> 選項 -> 用戶），搜索 eslint，點擊 Edit in setting.json 將如下選項添加到配置文件javascript

"eslint.autoFixOnSave": true,
"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    },
],

2020更新

因爲 vscode 版本更新，以上配置已經失效，須要改成css

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },

配置完以後，VSCode 會根據你當前 Vue 項目下的 .eslintrc.js 文件的規則來驗證和格式化代碼。 PS：自動格式化代碼在保存時自動觸發，目前試了 TS 和 JS 以及 vue 文件中的 JS 代碼都沒問題，html 和 vue 中的 html 和 css 無效。html

擴展

其實仍是有辦法格式化 vue 文件中的 html 和 css 代碼的，利用 vscode 自帶的格式化，快捷鍵是 shift + alt + f，假設你當前 vscode 打開的是一個 vue 文件，按下 shift + alt + f 會提示你選擇一種格式化規範，若是沒提示，那就是已經有默認的格式化規範了（通常是 vetur 插件），而後 vue 文件的全部代碼都會格式化，而且格式化規則還能夠本身配置，以下圖所示，能夠根據本身的喜愛來選擇格式化規則。由於以前已經設置過 eslint 的格式化規則了，因此 vue 文件只須要格式化 html 和 css 中的代碼，不須要格式化 javascript 代碼，咱們能夠這樣配置來禁止 vetur 格式化 javascript 代碼：而後回到剛纔的 vue 文件，隨意打亂代碼的格式，再按下 shift + alt + f ，會發現 html 和 css 中的代碼已經格式化了，可是 javascript 的代碼並沒格式化。不要緊，由於已經設置了 eslint 格式化，因此只要保存，javascript 的代碼也會自動格式化。vue

同理，其餘類型的文件也能夠這樣來設置格式化規範。java