[Vue, Intelli J] Vue CLI를 통한 ESLint + Prettier 설치 및 설정

내가 Vue CLI를 설치 한 이유는 Vue로만 설치했을 때 ESLint와 Prettier를 설정하는 정답을 찾기가 어려웠다. 그런데 Vue CLI로 Vue 프로젝트를 만들면 자동으로 설정파일을 만들어 주기 때문에 이를 설치하였다.

 

1. Vue 프로젝트 생성 (기본 가정은 Vue CLI 가 설치되어 있어야 한다. 관련된 오류와 함께 설치방법은 아래 포스트에 올렸으니 참고바란다.)

https://maverick11471.tistory.com/94

[Vue] Vue CLI 설치 시 권한 오류 해결

vue create (프로젝트명)

 

2. 본인이 설정하고 싶은 vue 프로젝트 설정하기

 - Vue CLI를 사용하면 새로운 Vue.js 프로젝트를 생성할 때 나타나는 질문들은 프로젝트의 설정을 사용자 맞춤으로 구성할 수 있도록 도와준다. 나는 아래와 같이 설정하였다.

Vue CLI v5.0.8
? Please pick a preset: Manually select features
 // 내가 직접 설정하겠다는 뜻이다.
? Check the features needed for your project: Babel, Linter
 // 프로젝트에서 사용할 도구이다. ** 여기서 ESLint(Linter)를 지정한다. 만약 추가로 Router 등을 설정하고 싶다면 Space를 누르면 추가가 된다.
? Choose a version of Vue.js that you want to start the project with 3.x
 // Vue의 버전을 묻고 있다.
? Pick a linter / formatter config: Prettier
 // ** 여기서 Prettier를 지정한다.
? Pick additional lint features: Lint on save
 // 파일을 저장할 때마다 자동으로 린트를 수행하여 코드의 스타일과 오류를 검사하도록 설정한다.
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
 // 설정 파일을 package.json에 통합할 것인지, 아니면 별도의 설정 파일을 만들 것인지 묻고 있다. 나는 별도의 config 파일을 만드는 것으로 설정했다.
? Save this as a preset for future projects? No
 // 현재 선택한 설정을 향후 프로젝트에서 사용할 수 있도록 저장할지 여부를 묻는 질문이다.

 

3. vue 실행

cd (프로젝트명)
npm run serve

 - localhost:8080 을 클릭하면 아래와 같이 창이 나온다.

 

여기서 끝이 아니라 추가 설정을 해줘야 한다.

1. .eslintrc.js

module.exports = {
  root: true,
  // 이 설정 파일이 루트 ESLint 설정 파일임을 나타냄. 하위 설정 파일은 무시함.
  env: {
    node: true,  // Node.js 환경에서 실행됨
  },
  extends: [ // ESLint 설정 파일에서 사용되는 키워드로, 기존의 규칙 세트나 구성을 가져와서 현재 설정에 포함시키는 역할
    "plugin:vue/vue3-essential",  // Vue.js 3에 대한 필수 ESLint 규칙
    "eslint:recommended",          // ESLint에서 추천하는 기본 규칙 세트
    "plugin:prettier/recommended", // Prettier와의 통합을 쉽게 설정하고, Prettier 규칙을 ESLint 규칙으로 적용
  ],
  parserOptions: {
    parser: "@babel/eslint-parser",  // Babel을 사용하여 최신 JavaScript 문법 지원
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 프로덕션 환경에서는 console 사용 시 경고를 표시하고, 개발 환경에서는 비활성화

    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 프로덕션 환경에서는 debugger 사용 시 경고를 표시하고, 개발 환경에서는 비활성화
  },
};

 

2. .prittier.js

module.exports = {
    singleQuote: true,          // 문자열에 단일 따옴표 사용
    semi: true,                 // 문장 끝에 세미콜론 사용
    useTabs: false,             // 탭 대신 공백 사용
    tabWidth: 2,                // 탭의 너비를 2로 설정
    trailingComma: 'all',       // 객체, 배열 등에서 마지막 항목 뒤에 쉼표 추가
    printWidth: 80,             // 한 줄의 최대 길이를 80자로 설정
    bracketSpacing: true,        // 객체 리터럴의 중괄호 안에 공백 추가
    arrowParens: 'avoid',       // 화살표 함수의 매개변수가 단일일 경우 괄호 생략
};

 

3. 인텔리제이 설정

 - ESLint

 

 - Prettier 설정

 

4. ignore 파일 생성

 - .eslintignore 

node_modules

 

 - .prettierignore

node_modules
.eslintrc.js