# <font class="h2">ESlint規範工具</font>
###### tags: `vscode`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>


:arrow_right:https://eslint.org/docs/user-guide/getting-started

ESLint(Coding Style) 會有什麼影響

- 程式碼會極度整齊，潔癖者推薦使用
- 團隊開發會有一致性
- 透過提示，可學習更好的語法習慣
- 搭配 Webpack 或框架 cli，如果不符合規範會無法編譯
<br><br><br><br>

### <font class="h3">全域安裝</font>
### <font class="h4">➤用npm全域安裝ESLint套件</font>
`npm install -g eslint`
<br><br><br><br>

### <font class="h4">➤產生package.json檔案</font>

<br><br><br><br>

### <font class="h4">➤安裝設定eslint</font>
`eslint --init`

<br>

<br>

<br>

<br>

<br>
這邊選用規範類型，下面就可以不用設定
Airbnb是裡面最嚴格的，Standard是較為寬鬆的

Standard規範:
- 兩空白鍵
- 單引號
- 不加分號

<br><br><br><br><br><br>

### <font class="h4">➤如果不選規範類型，自訂義</font>
<br>

<br>

<br>

<br>

<br>

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "standard"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      2 //空格要幾格
    ],
    "linebreak-style": [
      "error",
      "windows" //使用windows的換行，默認是使用unix
    ],
    "quotes": [
      "error",
      "single" //使用單引號
    ],
    "semi": [
      "error",
      "never"  //是否加分號(不要打always)
    ],
    "no-unused-var": [
      "off" //將未使用的變數錯誤提醒關閉
    ]
  }
}

:::info
CRLF是carriage return的意思，也就是\r, windows系統環境下的換行方式
LF是line feed的意思，也就是\n, Linux系統環境下的換行方式

這就是為什麼有些檔案從unix系統拿去windows上面看 會變成全部都在同一行
因為只有LF 他不知道是換行
:::
<br><br><br><br>

### <font class="h4">➤eslint的其他的設置</font>

module.exports = {
  // 目前專案是在什麼環境執行, 如果沒有設定 browser:true, 那就不會有 window 物件
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  // 直接採用 airbnb-base eslint 設定
  extends: [
    'airbnb-base',
  ],
  // globals 變數，一般指的都是 windows.xxx 變數
  globals: {
    $: 'readonly',
  },
  parser: 'babel-eslint',
  settings: {
    // eslint 可以讀取 webpack alias 設定
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js',
      },
    },
  },
  rules: {
    'global-require': 0,
    'import/no-extraneous-dependencies': 0,
    'import/prefer-default-export': 0,
    'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
  },
};

<br><br><br><br><br><br><br><br>

### <font class="h3">vscode設定檔</font>
選用工作區來設定(for專案)
<br>


{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true //存檔自動修正eslint的錯誤
  },
  "eslint.validate": [  //檢查那些檔案類型
    "javascript",
    "vue"
  ],
  "vetur.validation.template": false //關閉vetur的檢查，避免影響eslint
}

<br><br><br><br>

<br><br><br><br><br><br>

### <font class="h3">專案安裝</font>
### <font class="h4">➤npm init</font>

<br><br><br><br>

### <font class="h4">➤`npm install eslint --save-dev`安裝eslint</font>

<br><br><br><br>

### <font class="h4">➤`npm init @eslint/config`設定eslint</font>

<br><br><br><br>

### <font class="h4">➤選擇格式化工具</font>

<br><br><br><br><br><br>

### <font class="h3">常用的rules:</font>

rules: {
        indent: [2, 4], // 縮排規則，index[0] 的數字代表含意為 關閉(0), 警告(1), 錯誤(2)
        quotes: [2, 'single'], // 單引號, 雙引號
        semi: [2, 'never'], // 句尾是否加上 ";"
        'no-use-before-define': [2, 'nofunc'], //變數是否一定要宣告賦值
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 是否留下 console.log
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 是否留下 debugger
        'comma-spacing': [2, { // 關於 , 的規則，前後是否有空格
            before: false,
            after: true
        }],
        'key-spacing': [1, { // 關於 key 的 ":" 前後是否有空格
            beforeColon: false,
            afterColon: true
        }],
        'import/first': [0], // 雖說 import 都會先 Hoisting，在這些行數中間可否插入其他的變數或是函式 
        'object-property-newline': [2, { // Object 的撰寫規則，詳請請查閱官方文件
            allowAllPropertiesOnSameLine: false
        }],
        'object-curly-newline': [1, { // Object 的撰寫規則，詳請請查閱官方文件
            ObjectExpression: 'always',
            ImportDeclaration: 'always',
            ExportDeclaration: 'never'
        }],
        'vue/html-indent': [1, 4, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: []
        }],
        'vue/html-closing-bracket-newline': [2, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件
            singleline: 'never',
            multiline: 'always'
        }],
        'vue/html-closing-bracket-spacing': [2, { // Vue 中的 html 的撰寫規則，詳請請查閱官方文件
            selfClosingTag: 'always'
        }]
    }

<br><br><br><br>

### <font class="h3">排除eslint檢查</font>

### <font class="h4">➤此句不檢查</font>

var ignoreESLintLine = 0; // eslint-disable-line

<br><br>

### <font class="h4">➤此段不檢查</font>

/* eslint-disable */
var a = 0;
var b = 1;
/* eslint-enable */

<br><br>

### <font class="h4">➤那些檔案不檢查</font>

<br><br><br><br><br><br>

---
https://wcc723.github.io/javascript/2018/01/01/javascript-eslint/

https://wcc723.github.io/tool/2017/11/09/coding-style/