대중적인 formatting rule과 linting rule로 설정함
(rule이 각자 다를 수 있으니 충분한 협의 후 코딩 rule마다 변경)
1. node package manager install : npm init -y
—> package.json
의존성 표시
2. Formatting: prettier
npm install --save-dev prettier
—>package.json (prettier install)
—>package-lock.json
3. prettier 사용 시 필요 (+ prettier Extension)
.prettierrc 파일 생성
<—.prettierrc—>
{
"semi" : false,
"singleQuote": true
}
4. .vscode 폴더 생성 -> settings.json 파일 생성 ( 로컬 파일 세팅 모아둠, 본 프로젝트에만 쓰이는 세팅들 for javascript)
<—settings.json—>
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.insertSpaces": true
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"editor.insertSpaces": true
},
"tailwindCSS.emmetCompletions": true // tailwindCSS 사용시에만
}
5. eslint 설치 : npm install —save-dev eslint
5-1. eslint 사용 시 필요 —> eslint 설정 파일 생성
< — .eslintrc.js —>
module.exports = {
root: true,
parserOptions: {
ecmaVersion: 2020,
},
extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
rules: {
'import/prefer-default-export': ['off'],
},
}
6. airbnb-base linting rule 설치
npm install --save-dev eslint-config-airbnb-base eslint-plugin-import
- npm install --save-dev eslint-config-prettier
- npm install --save-dev eslint-plugin-node
- < — .eslintrc.js —>
module.exports = {
extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}
7. prettier 확장자 설치 (+eslint)
8. type checking ( // @ts-check )
npm install --save-dev typescript
9. node환경에서 type checking
npm install --save-dev @types/node(노드에서 주로 사용되는 객체들의 타입정보)
10. jsconfig.json
< jsconfig.json >
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"noUncheckedIndexedAccess": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}