Vue 3 : What is lint?

ESLint는 code convention을 사전 정의된 rules에 따라 감지하는 기능을 제공.

ESLint를 적용하면 code convention에 어긋난 모든 부분들을 하나도 빠짐없이 알아서 발견해주고 심지어 코드 변경 내용 저장하면 자동으로 ESLint 설정된 rules 대로 fix해주는 기능도 적용할 수 있음.

package.json 적용

ESLint test 를 위한 project 를 아래 절차대로 생성함.

 

vue create vue_lint   // vue_lint 는 project 이름임.

1. select default options ( vue3 babel, lint)
2. npm install --save-dev eslint eslint-plugin-vue   // 이미 install 되었으므로 version 이  8.0.3 에서 8.7.1 로 up 이 됨
   1. eslint 고유의 rules와 vue cli에 맞는 rules를 제공해주는 plugin
3. npm install --save-dev @babel/eslint-parser
   1. babel은 브라우저에서 ES6, ES7 같은 최신 javascript 문법을 이해할 수 있도록 변환해주는 플러그인인데 babel에 대한 eslint도 설정해줘야 함.  
   2. 안그러면 import, export 같은 최신 javascript 문법에서 eslint가 error로 걸러낼 것임.

 

ESLint Config 파일 구성하기

 

eslint 관련 플러그인 설치가 완료되었으면 project root 위치에 .eslintrc.js 파일을 생성해줌

module.exports = {
    root: true,
    parserOptions: {
      parser: '@babel/eslint-parser',
    },
    env: {
      node: true,
      browser: true,
    },
    extends: [
      'eslint:recommended',
      // 'plugin:vue/recommended',
      'plugin:vue/vue3-recommended',
    ],
};

위의 code 에 대한 설명임

root

- 특정 프로젝트로 ESLint 범위를 설정함.
- true : 프로젝트 root level 위치로 ESLint 수행 범위 설정

 

parserOptions

- ESLint를 수행하는 파서를 등록.
- npm으로 설치했던 @babel/eslint-parser으로 지정.

 

env

- predefined global variables, 일종의 예약어 같은 전역변수를 사용할 수 있게 해줌.
- node: module 사용 부분에서 에러 발생하면 true로 지정해줌.

 

extends

- eslint:recommended > eslint 고유의 rules를 사용할 수 있습니다.
+ plugin:vue/vue3-recommended
    - vue-cli에 대한 eslint rules를 사용할 수 있음.
    - 가령 vue component 내의 template 내부의 태그기반 코드에 대해서도 rules를 적용할 수 있음.
    - vue cli 3.xx 버전부터 사용하는 내용임.
+ plugin:vue/recommended
    - vue cli 2.xx 이하 버전에서 사용하는 플러그인임.

 

출처

https://beaniejoy.tistory.com/74