typescript, eslint (airbnb style guide), prettier ON vscode

settings.md

typescrpit

초기 설정 및 eslint, prettier 설정 그리고 툴마다 제공하는 eslint, prettier 플러그인 설치 하기

1. vscode plugins

• eslint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• prettier code-formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

2. typescript 설정

2.1. npm 패키지 설정

# 프로젝트 초기 설정
npm init -y

2.2. express install

# express 설치
npm i express

2.3. typescript 설치

-D 옵션은 --save-dev 과 같은 기능을 한다. devDependencies 에 포함되며 이는 개발단계에서만 필요할때 사용한다. 옵션 제거하고 사용해도 상관없다.

typescript가 현재 프로젝트에서 사용중인 패키지 타입을 정의한 패키지를 추가로 설치 해야 한다. @types/express, naming convention은 @types/package-name 이다

# TypeScript 설치, express에서 사용되는 types 패키지 설치
npm i -D typescript @types/express @types/node

2.4. tsconfig.json 설정

# tsconfig.json 생성
npx tsc --init

프로젝트에 필요한 최소 설정

# 기본으로 생성되는 tsconfig.json 에서 필요한 부분만 변경 (outDir, rootDir)
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist"
    "rootDir": "./src"
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  } 
}

2.5. typescript 컴파일 및 실행

# compile
npx tsc

# node run
node dist/app.js

# package.json 에 npm start로 사용하고 싶다면
"scripts": {
  "start": "npx tsc && node dist/app.js"
}

3. ESLint 설정

3.1. ESLint 설치

# eslint 및 airbnb style guide 설치
npm i -D eslint eslint-config-airbnb-base eslint-plugin-import

3.2. .eslintrc.json 설정

# .eslintrc.json 파일 생성 및 설정
npx eslint --init

Q: How would you like to use ESLint?
A: To check syntax and find problems

Q: What type of modules does your project use?
A: JavaScript modules (import/export)

Q: Which framework does your project use? (사용할 패키지 우리는 express 사용으로 없다고 선택하면 된다)
A: None of these

Q: Does your project use TypeScript?
A: Yes

Q: Where does your code run?
A: None

Q: What format do you want your config file to be in?
A: JSON

Q: The config that you've selected requires the following dependencies
A: Yes

.eslint.json 파일의 설정을 아래와 같이 변경한다. prettier 까지 설치 하고 나서 최종 설정이니 중간 확인이 필요하면 extends 의 아래 2개 prettier 를 지우고 확인하거나 계속해서 끝까지 설정한다

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": [
    // Airbnb style guide 적용
    "airbnb-base",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {},
  "ignorePatterns": ["dist/", "node_modules/"]
}

4. Prettier 설정

4.1. Prettier 설치

# Prettier 설치
npm i -D prettier

# ESLint 호환
npm i -D eslint-config-prettier eslint-plugin-prettier

4.2. .prettierrc.json 생성 및 설정

{
  "printWidth": 80,			// 한 줄의 라인 수
  "tabWidth": 2,			// tab의 너비
  "useTabs": false,			// tab 사용 여부
  "semi": true,				// ; 사용 여부
  "singleQuote": true,			// 'string' 사용 여부
  "quoteProps": "consistent",		// 객체 property의 따옴표 여부
  "trailingComma": "es5",		// 끝에 , 사용 여부
  "bracketSpacing": true,		// Object literal에 띄어쓰기 사용 여부 (ex: { foo: bar })
  "arrowParens": "always",		// 함수에서 인자에 괄호 사용 여부 (ex: (x) => y)
  "endOfLine": "lf"			// 라인 엔딩 지정
}

4.3. vscode VSCode Format On Save 설정

Preferences > settings > 검색: settings.json 에 추가

...
  "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    },
...