vue에서 eslint 사용하기(eslintrc.js)

 

ESLint는 자바스크립트 코드에서 오류를 찾고 코드 스타일을 유지하기 위한 뛰어난 도구 중 하나인데요.

 

이 도구는 설정 파일인 .eslintrc.js을 통해 규칙을 구성할 수 있습니다.

 

이 파일은 일반적으로 프로젝트의 루트 디렉토리에 위치하며, ESLint의 동작을 변경하고 프로젝트의 품질을 개선하는 데 중요한 역할을 합니다.

.eslintrc.js 파일을 수정하려면, 프로젝트 디렉토리에서 해당 파일을 열어서 원하는 변경 사항을 수행하면 됩니다. 예를 들어, 규칙을 추가하거나 삭제하거나 구성 옵션을 변경할 수 있습니다. 변경 사항을 저장하면 즉시 적용됩니다.

그러나 파일을 수정하기 전에, 파일의 내용을 이해하는 것이 중요합니다. ESLint 규칙을 변경할 때는 규칙이 어떻게 동작하는지, 해당 변경이 코드 품질에 어떤 영향을 미칠 수 있는지 등을 고려해야 합니다. 이러한 이유로 일부 개발자들은 ESLint를 사용하는 것을 권장하며, 코드 품질을 개선하기 위한 노력을 격려합니다. 더 나은 코드를 작성하기 위해 ESLint를 활용해 보세요!

 

C:\Users\Administrator\Documents\23 lng_api\front\lngapi_frontend\src\views\FuturesView.vue
  1:1   error  Unexpected Unicode BOM (Byte Order Mark)       unicode-bom
  5:12  error  Newline required at end of file but not found  eol-last

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

 

처음에 이런 오류가 떠서, 결국에는 eslint 까지 오게 되었네요.

 

 

 

C:\Users\Administrator\Documents\23 lng_api\front\lngapi_frontend>npm install -g eslint
C:\Program Files\nodejs\eslint -> C:\Program Files\nodejs\node_modules\eslint\bin\eslint.js
npm WARN notsup Unsupported engine for eslint@8.38.0: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: eslint@8.38.0
npm WARN notsup Unsupported engine for @eslint-community/eslint-utils@4.4.0: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: @eslint-community/eslint-utils@4.4.0
npm WARN notsup Unsupported engine for eslint-scope@7.1.1: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: eslint-scope@7.1.1
npm WARN notsup Unsupported engine for @humanwhocodes/module-importer@1.0.1: wanted: {"node":">=12.22"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: @humanwhocodes/module-importer@1.0.1
npm WARN notsup Unsupported engine for eslint-visitor-keys@3.4.0: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})npm WARN notsup Not compatible with your version of node/npm: eslint-visitor-keys@3.4.0
npm WARN notsup Unsupported engine for espree@9.5.1: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: espree@9.5.1
npm WARN notsup Unsupported engine for @eslint/js@8.38.0: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})
npm WARN notsup Not compatible with your version of node/npm: @eslint/js@8.38.0
npm WARN notsup Unsupported engine for @eslint/eslintrc@2.0.2: wanted: {"node":"^12.22.0 || ^14.17.0 || >=16.0.0"} (current: {"node":"12.21.0","npm":"6.14.11"})   
npm WARN notsup Not compatible with your version of node/npm: @eslint/eslintrc@2.0.2

 

 

 

 

 

 

npm 

Config 파일 설정 정보는 다음과 같아요.

eslint --init

 

해당 코드 실행후, 

 

 

여기서 저는 세미콜론 (;) 를 허용하지 않고,  엄격하게 코드 규칙을 잡는 기본 세팅에서 조금 완화하는 설정을 넣어주도록 하겠습니다.

 

처음 세팅은 다음과 같아요.(default)

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

 

(변경 후)

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    "indent": [
      "error",
      4
  ],
    "semi": [
        "error",
        "always"
    ],
    "no-trailing-spaces": 0,
    "keyword-spacing": 0,
    "no-unused-vars": 1,
    "no-multiple-empty-lines": 0,
    "space-before-function-paren": 0,
    "eol-last": 0
  }
}

이렇게 설정하게 되면, 생각보다 수없이 많은 에러가 발생하네요.

 

 

그래서 다시, 현재 내 indent 방식이 2여서 다음  에러가 뜨고 있길레, 설정 파일을 바꾸고, 아직 저는 세미콜론 사용이 익숙하지는 않아서, 항상 경고인 "errors" 를 1 로 변경했습니다. ㅎㅎ

 

그래서 최종 설정은.

 

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard'
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    "indent": [
      "error",
      2
  ],
    "semi": [
        1,
        "always"
    ],
    "no-trailing-spaces": 0,
    "keyword-spacing": 0,
    "no-unused-vars": 1,
    "no-multiple-empty-lines": 0,
    "space-before-function-paren": 0,
    "eol-last": 0
  }
}

 

vue standart 정책을 참고하시려면, 관련 블로그 글 참고하세요.

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=1ilsang&logNo=221337351543 

ESLint Vue-Standard 에 세미콜론 정책 적용 semi

 

 

 

자동으로 eslint를 이용해서, 코드의 에러를 고치고 싶은데, 설정하는 방법은 다음과 같습니다.

 

이후에 세팅은 해당 블로그 글을 참고했습니다.

 

https://mkonji23.tistory.com/21

vue 프로젝트 생성 및 Lint 적용하기(3) - eslint 룰 설정 및 오류 제거하기

 

이외에 좋은 인사이트를 준 블로그

https://velog.io/@picpal/%EC%BD%94%EB%93%9C%EC%97%90-eslint-prettier-%EC%9E%90%EB%8F%99-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B7%BC%EB%8C%80-%EC%9D%B4%EC%A0%9C-github-%EC%BB%A4%EB%B0%8B-%EC%B2%B4%ED%81%AC%EA%B9%8C%EC%A7%80-%EA%B3%81%EB%93%A4%EC%9D%B8

코드에 eslint , prettier 자동 적용하기 ( 근대 이제 github 커밋 체크까지 곁들인 )