VisualStudioCode Use Eslint For Airbnb

Posted on Edited on In Views: Disqus: Symbols count in article: 1.7k Reading time ≈ 3 mins.

VisualStudioCode Use Eslint For Airbnb

這篇介紹如何在Visual Studio Code IDE啟用Eslint功能。

VisualStudioCode install Eslint package

安裝步驟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1.npm init (全部按下一步) -> 建立package.json
2.切到專案root目錄下
3.eslint --init (按照自己需求) -> 建立 .eslintrc.js 
Option:
4.How would you like to use ESLint?
choose:To check syntax, find problems, and enforce code style.
5.What type of modules does your project use?
choose:JavaScript modules (import/export)
6.Which framework does your project use?
choose:None of these
7.Does your project use TypeScript?
choose:No
8.Where does your code run?
choose:Browser
9.How would you like to define a style for your project?
choose:Use a popular style guide
10.Which style guide do you want to follow?
choose:Airbnb: https://github.com/airbnb/javascript
11.What format do you want your config file to be in?
choose:JavaScript
12.Would you like to install them now with npm?
choose:Yes

.eslintrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
module.exports = {
    env: {
        browser: true,
        es2020: true
    },
    extends: [
        "airbnb-base"
    ],
    parserOptions: {
        ecmaVersion: 11,
        sourceType: "module"
    },
    rules: {
        "no-tabs": ["error", { allowIndentationTabs: true }],
        indent: ["error", "tab", { SwitchCase: 1 }],
        "comma-dangle": ["error", "never"],
        "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
        quotes: ["error", "double"],
        "prefer-template": ["off"],
        "no-continue": ["off"],
        "max-len": ["off"],
        "import/extensions": ["error",
            "ignorePackages",
            {
                js: "always",
                jsx: "never",
                ts: "always",
                tsx: "never"
            }]
    }
};