prettier / eslint setting of vue js

vue.js 프로젝트를 진행하기 이전에,
공통된 문법 및 스타일을 가져가기 위하여 prettier와 eslint 설정 작업을 해 주었다.

처음엔 여러가지 예시들이 섞여 있어서 제대로 된 설정을 할 수가 없었다.
eslint config와 prettier config에 대해서 다음과 같이 설정해주었다.

settings.json

vscode의 세팅에 다음 값을 추가한다.

{
  "editor.formatOnSave": true,
  "editor.formatOnType": true
}

1. NPM으로 다음 라이브러리를 설치한다.

   npm i eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
   

2. .eslintrc 파일 생성 및 설정

   module.exports = {
   // 현재 eslintrc 파일을 기준으로 ESLint 규칙을 적용
   root: true,
   // 추가적인 규칙들을 적용
   extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'prettier',
    'plugin:prettier/recommended',
   ],
   // 코드 정리 플러그인 추가
   plugins: ['prettier'],
   // 사용자 편의 규칙 추가
   rules: {
    'prettier/prettier': [
      'error',
      // 아래 규칙들은 개인 선호에 따라 prettier 문법 적용
      // https://prettier.io/docs/en/options.html
      {
        singleQuote: true,
        semi: true,
        useTabs: true,
        tabWidth: 2,
        trailingComma: 'all',
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },
   };
   
   

• root: 현재 폴더 위치를 기준으로 하위의 파일에 린트를 적용합니다. 상위 폴더에 린트를 적용하지 않습니다.
• extends: 린트의 기본적인 문법 검사 규칙 이외에 추가적인 규칙들을 적용합니다. 이미 누군가에 의해 정해진 몇 개의 규칙을 추가한다고 보면 됩니다.
• plugins: NPM으로 설치하여 사용할 수 있는 확장 규칙입니다. 대중적인 라이브러리와 결합하여 린트를 사용할 수 있습니다.
• rules: 린트를 실행할 때 사용자가 임의로 규칙을 추가하여 검사에서 제외 또는 추가하는 속성입니다.

3. NPM package.json에 명령어 추가

   {
   "lint": "eslint --ext .js,.vue src"
   }
   

4. vscode settings.json에 추가

   {
   ...
   "editor.formatOnSave": true,
   "eslint.autoFixOnSave": true,
   "eslint.alwaysShowStatus": true,
   "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
   ]
   }