ESLint, Prettier 설치

1. ESLint

코드의 오류나 버그, 스타일 점검

 

설치 후 명령어 입력

npm install -g -d eslint
eslint --init

 

아래와 같이 설정

- To check syntax and find problems, and enforce code style

- JavaScript modules (import/export)

- React

- TypeScript : Yes

- Node

- Use a popular style guide

- Airbnb

- JavaScript

- Yes

 

 

 

2. Prettier

 

설치 후 명령어 입력

npm install --save-dev --save-exact prettier

 

 

ESLint는 문법검사, Prettier는 코드 포맷을 맡게한다.

npm install eslint-plugin-prettier@latest --save-dev -g 
npm install --save-dev eslint-config-prettier # prettier와 겹치는 eslint 룰 삭제
npm install --save-dev eslint-plugin-prettier # eslint 기본 포맷 대신 프리티어 룰과 동일한 포매팅을 이용함

 

.eslintrc.js 파일 수정

뒤에 오는 설정이 앞을 덮어쓰기 때문에 prettier가 뒤로 가야한다.

extends: [

    "plugin:react/recommended",

    "airbnb",

    "plugin:prettier/recommended",

  ],

 

.prettierrc.js 세팅

.prettierrc.js 파일을 만들고 아래 붙여넣기

 

// .prettierrc.js

module.exports = {

    singleQuote: true,

    // 문자열은 홑따옴표로 formatting

    semi: true,

    //코드 마지막에 세미콜른이 있게 formatting

    useTabs: false,

    //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting

    tabWidth: 2,

    // 들여쓰기 너비는 2칸

    trailingComma: 'all',

    // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록   //formatting

    printWidth: 80,

    // 코드 한줄이 maximum 80칸

    arrowParens: 'avoid',

    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting

    endOfLine: "auto",

    // windows에 뜨는 'Delete cr' 에러 해결

  };

 

 

VSCode 확장프로그램 설정

Command + , 로 설정을 열고 검색창에 스샷처럼 적는다.

 

Editor: Format On Save <<< Check On

 

Eslint code action on save <<< all

 

Eslint Enable <<< check on

 

 

 

경고 수준 바꾸기

경고수준을 바꿔서 알아보기 편하게 만듬.

 

.eslintrc.js에 아래와 같이 추가

 

rules: {

    "react/jsx-filename-extension": [1, { allow: "as-needed" }],

    "no-unused-vars": "warn",

  },

 

 

 

 

이제 Ctrl+S으로 자동적용이 된다.

 

 

파일참고

.eslintrc.js

module.exports = {

  env: {

    browser: true,

    node: true,

    es2021: true,

  },

  extends: [

    "plugin:react/recommended",

    "airbnb",

    "plugin:prettier/recommended",

  ],

  parser: "@typescript-eslint/parser",

  parserOptions: {

    ecmaFeatures: {

      jsx: true,

    },

    ecmaVersion: "latest",

    sourceType: "module",

  },

  plugins: ["react", "@typescript-eslint"],

  rules: {

    "react/jsx-filename-extension": [1, { allow: "as-needed" }],

    "no-unused-vars": "warn",

  },

};

 

.prettierrc.js

// .prettierrc.js

module.exports = {

    singleQuote: true,

    // 문자열은 홑따옴표로 formatting

    semi: true,

    //코드 마지막에 세미콜른이 있게 formatting

    useTabs: false,

    //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting

    tabWidth: 2,

    // 들여쓰기 너비는 2칸

    trailingComma: 'all',

    // 자세한 설명은 구글링이 짱이긴하나 객체나 배열 키:값 뒤에 항상 콤마를 붙히도록         //formatting

    printWidth: 80,

    // 코드 한줄이 maximum 80칸

    arrowParens: 'avoid',

    // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting

    endOfLine: "auto",

    // windows에 뜨는 'Delete cr' 에러 해결

  };