eslint: command not found 에러 | .eslintrc.js

bash: eslint: command not found

 

책을 보고 따라하고 있었는데 명령어 eslint --init 에서 만난 에러

eslint는 자주 사용되니 -g 를 붙여 글로벌로 설치하라고 해서 했는데, 뭐 경로 문제인지 eslint를 찾지 못하는 거 같음?

 

공식문서를 보니 그냥 -g 없이 설치하길래 했더니 별 문제 없이 잘 되었다.. 그래서 일단 쓰는 중

$ npm install eslint --save-dev
$ ./node_modules/.bin/eslint --init

 

eslint

 

 

.eslintrc.js

eslint --init하면 만들어준다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:react/recommended",
    "airbnb",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 13,
    sourceType: "module",
  },
  plugins: [
    "react",
    "@typescript-eslint",
  ],
  rules: {
    quotes: ["error", "double"],
    "@typescript-eslint/quotes": ["error", "double"],
    "no-unused-vars": "off",
    "spaced-comment": "off",
    "@typescript-eslint/no-unused-vars": "warn",
    "jsx-a11y/control-has-associated-label": "off",
    "react/no-array-index-key": "off",
    "comma-dangle": "off",
    "arrow-body-style": "off",
    "react/no-unescaped-entities": "off",
    "react/prop-types": "off",
    "object-curly-newline": "off",
    "react/jsx-one-expression-per-line": "off",
    "implicit-arrow-linebreak": "off",
    "no-shadow": "off",
    "operator-linebreak": "off",
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "global-require": "off",
    "no-use-before-define": "off",
    "import/prefer-default-export": "off",
    "no-param-reassign": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "no-invalid-css": "off",
    "no-confusing-arrow": "off",
    "react/jsx-curly-newline": "off",
    "react/function-component-definition": "off",
    indent: "off",
    "react/jsx-filename-extension": [
      1,
      { extensions: [".js", ".jsx", ".tsx"] }, // jsx 사용 가능한 확장자 설정
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      }, // import 시 확장자명 사용하지 않음
    ],
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
      },
    },
  },
};

.eslintrc의 rules 설정 후 코드를 작성하다가

eslint react/function-component-definition 나 ...이거 외에도 어떤 경고들이 계속 뜬다.

보면서 내가 생각했을 때 좀 과하다 싶은 것들은 .eslintrc에서 rules에 추가한 후 off 시켜주고 있다.

근데 내가 생각했을 때는 '이건 좀..' 이런 것들도 있는데 이게 대체적으로 통용되는 규칙이라면 나도 따라야 하는건가..? 이 규칙에 익숙해져야 하는건가... 라는 생각이 들긴 한다.