Vue Vue-cli Eslint 實現在vscode裏保存後代碼自動格式化

 

使用Vue-cli構建的項目會啓用Eslint檢測代碼規範，所以很容易因爲代碼不規範控制檯總報錯，所以爲了解決這個問題，可以配置vscode在ctrl+s的時候自動代碼格式化。

---

1.配置環境

npm i -g eslint-plugin-vue
#or
npm i -S eslint-plugin-vue

2.安裝插件：eslint 插件和 vetur 插件

3.修改setting.json文件，快捷鍵打開：ctrl+shift+p

setting.json內容如下：

{
    "git.ignoreMissingGitWarning": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "window.zoomLevel": 1, //界面的放大等級
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "editor.tabSize": 2,
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "git.confirmSync": false,
    "git.autofetch": true,
    "editor.formatOnType": false,
    "git.enableSmartCommit": true,
    "team.showWelcomeMessage": false,
    "editor.fontSize": 16,
    "files.autoSave": "onWindowChange",
    "explorer.confirmDelete": false,
    "terminal.integrated.rendererType": "dom",
    "search.location": "panel",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.autoIndent": false
}