[Nuxt3] 2. Eslint + prettier + Typescript 설정

typescript + eslint + prettier 를 설정 하기 위해 아래의 패키지를 설치해 준다

yarn add -D eslint vue-eslint-parser eslint-plugin-vue eslint-config-prettier @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin typescript

패키지 설치가 끝났으면 파일들을 만들어 줘야 한다

처음으로 .prettierrc 파일을 root 경로에 생성 한다

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

위와 같이 옵션을 설정 해서 쓸 수 있다. 필요한 옵션은 그때 그때 찾아서 사용하면 된다

 

그리고 vscode에 settings 파일을 설정해야 하는데 workspace 단위로 설정할 수가 있고 전체적으로 설정 할 수 가 있다

여기서는 workspace 단위로 설정해 보겠다

root 경로에 .vscode 폴더를 생성 한 후 그 아래에 settings.json 폴더를 만든다

{
  "[typescript][javascript][json][jsonc][css][html][vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "source.fixAll.stylelint": true
    }
  },

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {},
  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "typescript", "html", "vue", "css"]
}

그리고 위와 같이 옵션들을 넣어 준다

 

다음으로 root 경로에 .eslintrc 파일을 만들어 준다.

{
  "root": true,
  "parser": "vue-eslint-parser",
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "@nuxtjs/eslint-config-typescript",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}

이렇게 설정하면 기본적인 eslint + prettier + typescript 설정이 끝났다

필요한 옵션들은 그때 그때 상황에 맞게 추가 해서 쓰면 된다.

 

아 참고로 .eslintrc 파일을 수정 후 적용이 안된다면 빠르게 vscode 를 재실행 해보자

이것 때문에 꽤나 많은 시간을 버렸다......