[Vue] ESLint 사용하기

 

ESLint 공식 사이트에서는 이렇게 설명하고 있습니다.

 

Find Problems

ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

Fix Automatically

Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional find-and-replace algorithms.

Customize

Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project.

 

간단히 설명하면 "코드에 문제를 찾고 자동으로 수정할 수 있게 한다. 커스터마이즈도 할수있다" 입니다 ㅎㅎ;

코드의 일관성을 유지할 수 있어서 사용을 강추합니다.

 

<tip>
webpack-simple 로 설치 했더니 eslint 가 없네요.

왠만하면 vue init webpack [projectname] 으로 만드는게 편할듯합니다.

그러면 아래와 같이 따로 설치할 필요가 없습니다.

 

설치

$ npm install eslint --save-dev

# or

$ yarn add eslint --dev

 

Config file

$ npx eslint --init

# or

$ yarn run eslint --init

키보드 위,아래 방향키로 선택할 수 있습니다. 두번째가 기본으로 선택되어 있지만,

전 세번째로 코드스타일 까지 강제로 바꿔주는 옵션을 선택하겠습니다. (선택은 자유)

프로젝트에서 사용하고 있는 모듈 타입을 선택하면 됩니다. 

저는 Vue 이기때문에 Vue.js 를 선택합니다.

TypeScript 사용하나요? > No

코드가 어디서 실행되나? ( 스페이스바로 선택하여 중복 선택 가능합니다. ) (전 vue 라서 browser 만 선택합니다.)

인기있는 스타일 가이드 ㅎㅎ

입맛에 맞게 선택~

config file 포멧은?

요딴것들을 지금 설치하시겠냐? 네

 

설치가 진행되고, 쬐금 더 기다리면 config file 이 생깁니다.

 

.eslintrc.js 기본

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

 

 

따로 필요한 rules 는 추가 해줘야 합니다. 필요한 리스트를 확인해보세요.

 

Preferences.. 에서 eslint 설정을 엽니다.

 

그리고 아무 js 파일에 가봅니다. 아래처럼 빨간줄로 경고 표시를 하고 있죠,

여기서 저장 버튼을 누르면 (mac : Command + S) 아무 동작 안합니다 ㅎㅎ

뭔가 수정을 해야 되니까 아무 라인에서나 띄어쓰기(space bar 눌러서)하시고 다시 저장 버튼을 누르면 

슥~ 바뀝니다.

이제 줄 맞추고, 띄어쓰기 잘못하고, " 쓰나 ' 쓰나 결정할 필요도 없습니다.

 

eslint : "넌 코딩만 해. 뒷 정리는 내가 해줄께"
나 : "코딩도 너가 해주면 안될까?"
eslint : ...

 

예외 

한번에 되지 않는 경우가 있죠.

이럴 때 해볼만한 것.

1. IDE 재시작. 

저는 webstorm 인데요. 그냥 껐다가 다시 열어봅니다. 별 효과는 없는 듯..

2. npm install --g eslint

이건 구글링 해볼때 이렇게 설치하라는 답변을 많이 봤습니다.

3. Automatic Configuration 말고 Manual 하게 설정 해봅니다.