[vue] VS Code에서 ESLint 적용하기

이전에 Python에서 linter를 적용하는 포스팅을 했었다. 이번 포스팅은 Vue.js에서 eslint를 적용해보겠다.

python만큼은 아니라고 생각하지만, vue도 스타일 가이드(공식 스타일 가이드)가 꽤나 깐깐하다. 문법적으로 틀린 것이 아니라도, 강제로 ESLint를 끄지 않는 이상 필수적인 스타일 가이드를 위반하면 실행 단계에서 오류가 발생한다. 공식 가이드를 보면, 필수적인 것과 추천해주는 것 등이 있다.

어떻게 정할지는 개인 혹은 팀마다 자유이나, 최대한 일관적으로 유지하면 좋고 또 자동으로 수정해주는 부분이 많기 때문에 본인은 recommended를 사용하였다. prettier를 부가적으로 설치해서 사용할 수도 있지만, VS Code에서는 ESLint가 자동으로 formmating까지 해주기 때문에 본인은 설치하지 않았다.

1. 확장에서 ESLint 설치
   -> VS Code 확장에서 ESLint를 설치하거나 npm install eslint -D로 설치하면 된다.
   
   
2. npm install eslint-plugin-vue -D , npm install babel-eslint -D 로 패키지 설치
   -> vue와 연계하기 위한 패키지들을 설치한다. babel은 자바스크립트를 더욱 많은 브라우저들이 알아들을 수 있도록 변환해주는 것인데, 사용하면 자바스크립트의 최신 문법을 사용해도 여러 브라우저에 적용이 된다.
   -> 더불어 typescript를 사용할 경우에는 babel-eslint를 사용하지 않아도 된다.
   
   
3. ESLint를 설치하면 .eslintrc.js 파일이 자동으로 생성된다. 생성되지 않으면 root 위치에 만들어주면 된다. 그 후에 아래처럼 적용한다. 아래 스타일은 필자가 사용하는 스타일로, rules나 extends는 원하는대로 변경해도 좋다.

module.exports = {
    root: true,
    parserOptions: {
        parser: 'babel-eslint',
    },
    env: {
        browser: true,
    },
    extends: [
        'plugin:vue/recommended',
    ],
    plugins: [
        'vue',
    ],
    rules: {
        'nenerator-start-spacing': 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'semi': ["error", "never"],
        'no-unsafe-finally': 0,
        'no-return-assign': 0,
        'comma-dangle': ['error', "always-multiline"],
        'space-before-function-paren': ['error', 'never'],
        'space-before-blocks': ['error', 'never'],
        'keyword-spacing': ['error', { before: true, after: true}],
    },
};

   

    4. root 위치에서 .vscode/settings.json을 만든다. 다른 프로젝트에서도 많이 작성했겠지만, 이 프로젝트에서 어떻게 작동할지를 정의해줄 수 있다. 만약 typescript라면 아래에서 javascript 대신에 typescript를 넣어주면 된다.

 

{
    "eslint.validate": [
        "vue",
        "javascript",
        "javascriptreact",
        "html"
    ],
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

 

적용이 완료되면 아래와 같이 자동으로 수정이 된다. 틀린 문법은 아니지만 본인이 세미 콜론을 사용하지 않는다고 정의했기 때문에 수정이 된다.