vscode保存代碼，自動按照eslint規範格式化代碼設置

時間 2019-11-30

標籤 vscode 保存代碼自動按照 eslint 規範格式化設置简体版

原文原文鏈接

vscode保存代碼，自動按照eslint規範格式化代碼設置

編輯器代碼風格一致，是前端代碼規範的一部分。咱們如今前端絕大部分都在使用eslint，或者將要把代碼改成eslint，那麼此時咱們怎麼方便使用這個規範呢，下面我來介紹一下使用vscode+eslint 自動保存，自動格式化的一種方式！javascript

首先須要裝一些vscode插件css

eslint、Vetur、Prettier，具體的插件說明可參考做者以前的一篇文章。html

vscode插件安裝前端

安裝完成後須要配置一下eslint，打開eslint的配置文件（左下角有個設置,點開搜索settings.json)vue

打開settings.jons，貼上以下配置，注意本身原有的vscode主題和字體等不要替換掉

{
  "workbench.colorTheme": "One Monokai",
  "editor.fontSize": 14,
  "eslint.enable": true, //是否開啓vscode的eslint
  "eslint.autoFixOnSave": true, //是否在保存的時候自動fix eslint
  "editor.formatOnSave": true, // #每次保存的時候自動格式化
  "eslint.options": { //指定vscode的eslint所處理的文件的後綴
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.validate": [ //肯定校驗準則
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "files.autoSave": "off",
  "files.associations": {
    "*.wpy": "vue",
    "*.wxml": "wxml",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.html": "html"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  // vscode默認啓用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 從新設定tabsize
  "editor.tabSize": 2,
  //  #讓prettier使用eslint的代碼格式進行校驗 
  "prettier.eslintIntegration": true,
  //  #去掉代碼結尾的分號 
  "prettier.semi": false,
  //  #使用單引號替代雙引號 
  "prettier.singleQuote": true,
  //  #讓函數(名)和後面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #讓vue中的js按編輯器自帶的ts格式進行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  //必定要在vutur.defaultFormatterOptions參數中設置，單獨修改prettier擴展的設置是沒法解決這個問題的，由於perttier默認忽略了vue文件（事實上從忽略列表移除vue也不能解決這個問題）
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    },
    "prettier": {
      //  #去掉代碼結尾的分號 
      "semi": false,
      //  #使用單引號替代雙引號 
      "singleQuote": true
    }
  },
  // 插件KoroFileHeader
  // 文件頭部註釋-快捷鍵crtl+alt+i（window）,ctrl+cmd+t (mac)
  "fileheader.customMade": {
    "Descripttion": "",
    //"version": "",
    "Author": "voanit",
    "Date": "Do not edit",
    "LastEditors": "voanit",
    "LastEditTime": "Do not Edit"
  },
  //函數註釋-快捷鍵ctrl+alt+t (window), ctrl+alt+t(mac)
  "fileheader.cursorMode": {
    "name": "",
    // "test": "test font",
    // "msg": "",
    "param": "",
    "return": ""
  },
  //安裝live Server插件
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.CustomBrowser": "chrome", //設置默認打開的瀏覽器
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.port": 5000, //設置本地服務的端口號
  "liveServer.settings.root": "/dist"
}

複製代碼