vs code保存自動按照Eslint規範格式化代碼，有了這個設置，不再用爲格式煩惱了

時間 2020-03-11

標籤 code 保存自動按照 eslint 規範格式化代碼有了這個設置不再用爲格式煩惱简体版

原文原文鏈接

聊幾句

話說，最先接觸vue項目，是在2018年五六月份，那時候，是直接在合做方的小夥伴搭建好的一個前端項目框架裏直接開始作項目模塊功能了，他們那個項目中並沒用到什麼格式檢查，依然是像在.js文件中寫代碼同樣在.vue文件中寫代碼，格式也是vs code的自動保存格式就能夠。而後，神煩的事情來了，2018年初底，咱們本身的項目也開始使用vue了，而後，我經過vue-cli腳手架建立的項目環境，寫了段時間後，發現這個ESlint語法檢測真是使人抓狂！！！檢查太嚴格了！
爲此去學習下ESlint的規則，而且查看了JavaScript Standard Style 代碼規範細則，這裏有詳細的eslint代碼規範的示例。可是，這些規則太細太多，記不住不說，還不習慣，例如：javascript

代碼末尾不能加分號 ;
代碼中不能存在多行空行
tab鍵不能使用，必須換成兩個空格
代碼中不能存在聲明瞭但未使用的變量

以上這規則很痛苦，由於過去習慣了末尾分號，曾記得，當初大學裏學c語言，老師敲黑板，說，末尾分號不要忘，言猶在耳。eslint卻要求不要末尾分號。html

當時，抽了個週六好好的研究了一下這個eslint在vs code裏設置，果真有自動格式化設置，太好了。那時忙於工做，只是在工做任務jira和wiki都登記了這個配置，忘了在sf記錄。
今年三月換工做了，上週來到新的公司，新電腦，一切都要從新配置，纔想起來把這個整理一下。也順便記錄一下本身的成長。前端

上面說了一大堆廢話，接下來講說個人設置吧.vue

Visual Studio Code setting.json

首先，在Visual Studio Code 安裝 ESLint插件、Vetur插件、vue-format插件等。java

而後，使用vs code編輯器直接打開setting.json文件，個人配置以下:git

{
    "editor.fontFamily": "Consolas, 'Courier New', monospace,'Dengxian'",
    "git.ignoreMissingGitWarning": true,
    "explorer.confirmDelete": false,
    "workbench.tree.horizontalScrolling": true,
    "window.zoomLevel": 0,
    "vetur.validation.template": false,
    "eslint.autoFixOnSave": true, // eslint在保存文件時自動格式化代碼
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "editor.fontSize": 16,
    "editor.snippetSuggestions": "top",
    "dart.openDevTools": "flutter",
    "[xml]": {
        "editor.defaultFormatter": "fabianlauer.vs-code-xml-format"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // "editor.formatOnSave": true, //在保存文件時自動格式化代碼
}

今後之後，不再用管什麼ESlint語法了，寫代碼隨便寫，按ctrl s保存的時候，自動就變成了ESlint格式，也不用對.eslintrc.js 文件進行任何修改了，一切格式交給編輯器，你只須要專一於寫代碼邏輯就行了。老話說得好，工欲善其事必先利其器。vue-cli

vue 使用iView，Eslint老是報錯

另外，值得一提的是，vue 使用iView（2019年10月份，iview更名爲 View UI，即原先的 iView）的項目中，Eslint老是報錯\[vue/no-parsing-error\] Parsing error: x-invalid-end-tag.,json

在.eslintrc.js中添加的規則segmentfault
rules:{
    'vue/no-parsing-error': [2, {
     "x-invalid-end-tag": false
   }]
}
在vscode的settings 裏面的配置以下：框架
"vetur.validation.template": false