Visual Studio Code 格式化ESlint 的方法

既然要格式化ESlint，就不得不先介紹一下什么是ESlint。后面再介紹格式化的方法

1.ESlint

ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。在許多方面，它和 JSLint、JSHint 相似，除了少數的例外：

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代碼中的模式
• ESLint 是完全插件化的。每一個規則都是一個插件並且你可以在運行時添加更多的規則。

總的來說，ESlint就是用來檢測代碼風格、規范代碼格式的工具。

2.格式化方法

2.1 安裝對應插件

插件對應功能就不逐一介紹了，直接用吧~~~

1.ESlint

2.vetur

3.Prettier - Code formatter

4.Manta's Stylus Supremacy

2.1 添加相應配置

打開VSCode編輯器，點擊 “文件>>首選項>>設置”，顯示如下區域。並點擊 “在setting.json中編輯”，添加對應代碼即可在下次編寫代碼時通過 “Ctrl+S” 進行格式化了。

 

 對應代碼如下：

{
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "prettier.eslintIntegration": true,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    "stylusSupremacy.insertColons": false,
    "stylusSupremacy.insertSemicolons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertNewLineAroundImports": false,
    "stylusSupremacy.insertNewLineAroundBlocks": false
}

 

到這里就大功告成了，快去試試吧。