ESLint, Prettier 적용 (IntelliJ, WebStorm)

ESLint, Prettier

ESLint: 코드 사용방식들을 일관성있게 고쳐주는 역할(function vs arrow function, for vs forEach vs map)
Prettier: 코드 스타일을 통일성있게 고쳐주는 역할(들여쓰기, 공백...)

ESLint, Prettier을 적용해야 코드의 공통화, 편리성에 대한 이점을 잘 설득하게 되어 팀원들이 모두 잘 사용해볼 수 있는 메뉴얼입니다.
IntelliJ, WebStorm, Android Studio 등 JetBrains의 IDE를 사용하며 ESLint, Prettier를 처음 적용하는 분들에게도 도움이 되었으면 좋겠습니다. :)

큰 틀은 다음과 같습니다.

ESLint, Prettier에 관련된 Package 설치 => ESLint, Prettier 설정 파일 작성 => IDE 내부 설정

과정

1. ESLint, Prettier에 관련된 package 설치

> npm i -D ...

"eslint": "^8.45.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-svelte": "^2.32.4",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",

 

2. ESLint, Prettier 설정 파일 작성

 

.eslintrc

https://eslint.org/docs/latest/use/configure/configuration-files

{
"root": true,
  "extends": ["eslint:recommended", "plugin:svelte/recommended", "prettier"],
  "parserOptions": {
  "sourceType": "module",
    "ecmaVersion": 2020,
    "extraFileExtensions": [".js, .svelte"]
},
  "env": {
"browser": true,
   "es2017": true,
   "node": true
}
}

 

.prettierrc

https://prettier.io/docs/en/options.html

{
 "useTabs": true,
 "singleQuote": false,
 "trailingComma": "none",
 "printWidth": 100,
 "plugins": ["prettier-plugin-svelte"],
 "pluginSearchDirs": ["."],
 "svelteSortOrder": "styles-markup-scripts",
 "overrides": [{ "files": "*.svelte","options": { "parser": "svelte" } }]
}

 

2 - 1 (추가) 적용하고 싶지 않은 파일 설정하기(.eslintignore, .prettierignore)

 

.eslintignore

.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

.prettierignore

.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

 

3. IntelliJ 설정

window shortcut: Ctrl + Alt + s

 

3 - 1. Prettier(Plugins 설치)

 

3 - 2. 저장시 ESLint 적용 설정

 

3 - 3. 저장시 Prettier 적용 설정