[Vue] ESLint, Prettier 적용 및 VSCode 적용

먼저 Project에서 ESLint, Prettier 사용과 VSCode에 적용은 별개라는것을 확인하겠습니다.

CLI를 통한 실행

npx eslint 'src/main.js'

npx prettier -c 'src/main.js'

ESLint, Prettier를 CLI로 실행하여 파일들을 검사할 수 있습니다. 

해당 도구들을 설치하면 명령어를 실행하여 파일들을 검사하는 것이지 Editor에서 해당 설정이 동작하는것은

아니라는점 숙지해주세요.

 

ESLint, Prettier 적용

npm init vue@latest # Vue CLI를 통한 프로젝트 생성

vue CLI를 통해  ESLint와 Prettier를 설치하신분은 .eslintrc.cjs 파일을 보실수 있습니다.

없다면 ESLint와 Prettier를 각각 깔아주시고 환경설정 파일을 생성해주셔야합니다.

환경설정 파일은 다양한 포멧이 있으니 제일 하단에 링크를 확인해주세요.

.eslintrc.cjs

// .eslintrc.cjs
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,	// 현재 설정파일이 위치한 directory를 root로 설정
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended', // recommended rule 자동 활성화
    // eslint와 prettier 규칙 충돌 방지, prettier 설정시 recommended eslint rule을 자동으로 off시켜줌. 
    '@vue/eslint-config-prettier', 
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [	// prettier 설정, eslint 설정파일에서 설정가능
      'error',
      {
        singleQuote: true, // single quote 사용
        tabWidth: 2, // tabWidth 2
        trailingComma: 'all', // 멀티라인에서 라인 뒤 콤마 사용
        printWidth: 80, // 한 라인 최대길이
        bracketSpacing: true, // { foo:bar } 형태로 앞, 뒤 스페이스
      },
    ],
  },
};

설정파일 관련 설명은 주석정도로만 하고 넘어가겠습니다.

 

VSCode에 설정 적용

ESLint, Prettier 설정을 명령어 실행으로 확인하기 보다는 Editor에 바로 적용해서 보면 편리하겠죠?

이떄 필요한것이 ESLint extension입니다.

ESLint Extension

ESLint Extension 설치 후에 Reload Window를 해주면 적용이 됩니다. 

( 커맨드 팔레트(Ctrl + Shift + p) > Reload Window )

Reload Window

 

ESLint Extension 관련 설정은 settings.json에서 하시면 됩니다. 유저 폴더 아래에 위치합니다.

settings.json

저는 저장시에 자동으로 설정에 맞게 수정되도록 설정해놓았습니다.

// settings.json
}
...
    "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true		// 파일 저장시 자동으로 수정
    },
}

저장시 적용

 

이상입니다.

 

관련 글

2022.08.24 - [개발 환경구축] - ESLint vs Prettier 차이 (With 예시)

ESLint vs Prettier 차이 (With 예시)

 

참고자료

https://eslint.org/docs/latest/user-guide/configuring/configuration-files

Configuration Files - ESLint - Pluggable JavaScript Linter

https://eslint.org/docs/latest/rules/

Rules - ESLint - Pluggable JavaScript Linter