Skip to content

setup

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

setup

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
command-palette.png
command-palette.png
 
 
format-on-save-off.png
format-on-save-off.png
 
 

README.md

타입스크립트 프로젝트 환경 구성(코딩 컨벤션)

  1. 프로젝트 폴더 생성
  2. npm init -y로 package.json 파일 생성
  3. 아래 명령어로 타입스크립트 및 문법 검사, 코드 정리 도구 라이브러리 추가
npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier
  1. 프로젝트 폴더 바로 아래에 ESLint 설정 파일 추가
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [ // 추가한 플러그인에서 사용할 규칙을 설정합니다.
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'], // 플러그인은 일련의 규칙 집합이며, 플러그인을 추가하여도 규칙은 적용되지 않습니다.
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser', // 구문 분석
  },
};
  1. ESLint 이그노어 파일 추가
// .eslintignore
node_modules

VSCode ESLint 플러그인 관련 설정

  1. VSCode의 ESLint 플러그인 설치
  2. VSCode에서 ctrl + shift + p / cmd + shift + p 키를 이용하여 명령어 실행 창 표시
  3. 명령어 실행 창에 open settings (json) 입력 후 선택

find-user-settings-on-command-palette

  1. VSCode 사용자 정의 파일인 settings.json 파일의 내용에 아래와 같이 ESLint 플러그인 관련 설정 추가.
{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": { // 저장했을 때 자동 변환
      "source.fixAll.eslint": true 
  },
  "eslint.alwaysShowStatus": true, // 작성할때 상태 변환
  "eslint.workingDirectories": [ // eslint 코드가 있는 디렉토리 찾기
      {"mode": "auto"}
  ],
  "eslint.validate": [ // validation 목록
      "javascript",
      "typescript"
  ]
}
  1. ctrl + , 또는 cmd + , 눌러서 VSCode 설정 파일(Settings)에 들어간 후 format on save 검색. 아래와 같이 체크가 안되어 있는지 확인.

format-on-save-off