1
$ npm i eslint # eslint 설치
2
$ touch .eslintrc.js # .eslintrc.js 생성
3
$ npm run lint # 린트 실행

1
// .eslintrc.js
2
module.exports = {
3
  extends: ['eslint:recommended'],
4
}

1
$ npm i prettier # prettier 설치
2
$ npx prettier src/**/* --write # prettier 실행

1
$ npm i eslint-config-prettier eslint-plugin-prettier

1
// .eslintrc.js
2
module.exports = {
3
  extends: ['eslint:recommended'],
4
}

1
// VSCode setting.json
2
{
3
  "eslint.enable": true, // eslint 활성화
4
  "editor.codeActionsOnSave": {
5
    // 저장할 떄마다 eslint 코드 고치기
6
    "source.fixAll.eslint": true
7
  }
8
}

1
{
2
  /* ESLint, Prettier 언어별 설정 */
3
  "eslint.enable": true,
4
  "editor.codeActionsOnSave": {
5
    "source.fixAll.eslint": true
6
  },
7
  "prettier.singleQuote": true,
8
  "editor.formatOnSave": false,
9
  "editor.defaultFormatter": "esbenp.prettier-vscode",
10
  "[html]": {
11
    "editor.formatOnSave": true,
12
    "editor.defaultFormatter": "vscode.html-language-features"
13
  },
14
  "[javascript]": {
15
    "editor.formatOnSave": true
16
  },
17
  // jsx
18
  "[javascriptreact]": {
19
    "editor.formatOnSave": true
20
  },
21
  "[typescript]": {
22
    "editor.formatOnSave": true
23
  }
24
  // 위 언어들 외에도 저장 시 ESLint, Prettier 적용할 언어를 설정하면 된다.
25
}

1
{
2
  "singleQuote": true,
3
  "bracketSpacing": true,
4
  "bracketSameLine": true,
5
  "arrowParens": "avoid",
6
  "printWidth": 120
7
}

1
{
2
  "parserOptions": {
3
    "ecmaVersion": "latest"
4
  },
5
  "env": {
6
    "browser": true,
7
    "node": true,
8
    "commonjs": true,
9
    "es2022": true
10
  },
11
  "globals": { "_": true },
12
  "plugins": ["import", "html"],
13
  "extends": "airbnb-base",
14
  "rules": {
15
    // "off" or 0 - turn the rule off
16
    // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
17
    // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
18
    // "no-var": "off",
19
    "no-console": "warn",
20
    "no-plusplus": "off",
21
    "no-shadow": "off",
22
    "vars-on-top": "off",
23
    "no-underscore-dangle": "off", // var _foo;
24
    "comma-dangle": "off",
25
    "func-names": "off", // setTimeout(function () {}, 0);
26
    "prefer-template": "off",
27
    "no-nested-ternary": "off",
28
    "max-classes-per-file": "off",
29
    "consistent-return": "off",
30
    "no-restricted-syntax": ["off", "ForOfStatement"], // disallow specified syntax(ex. WithStatement)
31
    "prefer-arrow-callback": "error", // Require using arrow functions for callbacks
32
    "require-await": "error",
33
    "arrow-parens": ["error", "as-needed"], // a => {}
34
    "no-param-reassign": ["error", { "props": false }],
35
    "no-unused-expressions": [
36
      "error",
37
      {
38
        "allowTernary": true, // a || b
39
        "allowShortCircuit": true, // a ? b : 0
40
        "allowTaggedTemplates": true
41
      }
42
    ],
43
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
44
    "max-len": [
45
      "error",
46
      {
47
        "code": 120,
48
        "ignoreComments": true,
49
        "ignoreStrings": true,
50
        "ignoreTemplateLiterals": true
51
      }
52
    ] // prettier의 printWidth 옵션 대신 사용
53
  }
54
}