一波ESLint小技巧

時間 2019-11-05

標籤 eslint 技巧简体版

原文原文鏈接

@一波ESLint小技巧javascript

create by db on 2019-10-28 16:31:00
Recently revised in 2019-10-28 17:44:27html

Hello 小夥伴們，若是以爲本文還不錯，麻煩點個贊或者給個 star，大家的贊和 star 是我前進的動力！GitHub 地址vue

最近借鑑總結了一波ESLint的小技巧，以記錄本身的學習心得。現分享給你們，以供參考。若有不足，還請多多指教，謝謝你們。java

參考文獻：react

前言

關於ESLint

在團隊開發中，出於代碼規範的考慮，咱們一般按照ESlint規範書寫代碼。加入ESLint有很是多的好處，好比說能夠幫助咱們避免一些很是低級的錯誤，一些格式上的問題致使咱們在運行生產環境的時候出現一些不明因此的報錯。還有就是在跟團隊協做的時候，每一個人都保持同一個風格進行代碼書寫，這樣團隊內部相互去看別人的代碼的時候，就能夠更容易的看懂。typescript

但有些低級的格式問題常常被死板的ESLint卡住。。。因此咱們應該有個自動格式化工具。shell

正文

Vue文件一鍵格式化

在vscode的文件-首選項-設置裏，右側配置裏添加以下代碼便可（代碼有註釋！），今後直接 Ctrl+S就能一鍵格式化了

{
  // "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "window.zoomLevel": 2,
  "editor.tabSize": 2,
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": [
      "html"
    ]
  },
  "git.ignoreMissingGitWarning": true,
  // "git.autofetch": true
  "editor.wordWrap": "on",
  "search.location": "sidebar",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "workbench.colorCustomizations": {
    "activityBarBadge.background": "#2979FF",
    "list.activeSelectionForeground": "#2979FF",
    "list.inactiveSelectionForeground": "#2979FF",
    "list.highlightForeground": "#2979FF",
    "scrollbarSlider.activeBackground": "#2979FF50",
    "editorSuggestWidget.highlightForeground": "#2979FF",
    "textLink.foreground": "#2979FF",
    "progressBar.background": "#2979FF",
    "pickerGroup.foreground": "#2979FF",
    "tab.activeBorder": "#2979FF",
    "notificationLink.foreground": "#2979FF",
    "editorWidget.resizeBorder": "#2979FF",
    "editorWidget.border": "#2979FF",
    "settings.modifiedItemIndicator": "#2979FF",
    "settings.headerForeground": "#2979FF",
    "panelTitle.activeBorder": "#2979FF",
    "breadcrumb.activeSelectionForeground": "#2979FF",
    "menu.selectionForeground": "#2979FF",
    "menubar.selectionForeground": "#2979FF",
    "editor.findMatchBorder": "#2979FF",
    "selection.background": "#2979FF40"
  },
  "materialTheme.accent": "Blue",
  "terminal.integrated.rendererType": "dom",
  // vscode默認啓用了根據文件類型自動設置tabsize的選項
  "editor.detectIndentation": false,
  // 從新設定tabsize
  "editor.tabSize": 2,
  // #每次保存的時候自動格式化 
  "editor.formatOnSave": true,
  // #每次保存的時候將代碼按eslint格式進行修復
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #讓prettier使用eslint的代碼格式進行校驗 
  "prettier.eslintIntegration": true,
  //  #去掉代碼結尾的分號 
  "prettier.semi": false,
  //  #使用帶引號替代雙引號 
  "prettier.singleQuote": true,
  //  #讓函數(名)和後面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #這個按用戶自身習慣選擇 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #讓vue中的js按編輯器自帶的ts格式進行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue組件中html代碼格式化樣式
    }
  },
  // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
  "stylusSupremacy.insertColons": false, // 是否插入冒號
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括號
  "stylusSupremacy.insertNewLineAroundImports": false, // import以後是否換行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "editor.fontSize": 16
}
複製代碼

自動修復報錯

在報不少錯誤以後，若是咱們一條一條地去修復，就會變的很是的麻煩，相信剛接觸ESLint的童鞋都深有體會。其實這些錯誤均可以讓ESLint幫助咱們自動地修復。

在命令行輸入：

npm run lint -- --fix

你會發現，世界一下安靜了許多，沒有那麼多飄紅的報錯，沒有滿屏的error和warning。

在命令行輸入：

npm run lint -- --fix

你會發現，世界一下安靜了許多，沒有那麼多飄紅的報錯，沒有滿屏的error和warning。

組件內關閉eslint檢測

直接在代碼文件中以註釋的方式定義須要注意的是，代碼文件內以註釋配置的規則會覆蓋配置文件裏的規則，即優先級要更高。

臨時在一段代碼中取消eslint檢查，能夠以下設置：

/* eslint-disable */
 
// Disables all rules between comments 
alert(‘foo’);
 
/* eslint-enable */
複製代碼

臨時在一段代碼中取消個別規則的檢查（如no-alert, no-console）：

/* eslint-disable no-alert, no-console */
 
// Disables no-alert and no-console warnings between comments 
alert(‘foo’); 
console.log(‘bar’);
 
/* eslint-enable no-alert, no-console */
複製代碼

在整個文件中取消eslint檢查：

/* eslint-disable */
 
// Disables all rules for the rest of the file 
alert(‘foo’);
複製代碼

在整個文件中禁用某一項eslint規則的檢查：

/* eslint-disable no-alert */
 
// Disables no-alert for the rest of the file 
alert(‘foo’);
複製代碼

針對某一行禁用eslint檢查：

alert(‘foo’); // eslint-disable-line
 
// eslint-disable-next-line 
alert(‘foo’);
複製代碼

針對某一行的某一具體規則禁用eslint檢查：

alert(‘foo’); // eslint-disable-line no-alert
 
// eslint-disable-next-line no-alert 
alert(‘foo’);
複製代碼

針對某一行禁用多項具體規則的檢查：

alert(‘foo’); // eslint-disable-line no-alert, quotes, semi
 
// eslint-disable-next-line no-alert, quotes, semi 
alert(‘foo’); 
複製代碼

總結

……其實都是些取巧的小方法。

路漫漫其修遠兮，與諸君共勉。

PMP，必勝！！！

後記：Hello 小夥伴們，若是以爲本文還不錯，記得點個贊或者給個 star，大家的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址

db 的文檔庫由 http://www.javashuo.com/tag/db 採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。
基於github.com/danygitgit上的做品創做。
本許可協議受權以外的使用權限能夠從 creativecommons.org/licenses/by… 處得到。