ESLint + Prettifier VSCode 린 설정

6639 단어 typescriptvscode
파일 저장 시 자동 린팅/수정을 위한 구성을 포함하는 ESLint + Prettifier의 기본 VSCode 설정. 나는 ESLintPrettier Typescript 통합에 대한 khalilstemmler의 기사에서 단계를 나열하고 압축 설정으로 병합했습니다.
  • npm cli를 통해 lint 및 기타 lint 플러그인 설치

  • npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
    


  • 다음 내용으로 루트 디렉토리에서 생성.eslintrc:

  • {
      "root": true,
      "parser": "@typescript-eslint/parser",
      "plugins": [
        "@typescript-eslint"
      ],
      "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
      ],
      "rules": { }
    }
    


  • 다음 내용으로 루트 디렉토리에서 생성.eslintignore:

  • node_modules
    dist
    


  • (선택 사항) eslint 스크립트를 package.json에 추가합니다. 이를 통해 npm cli에서 lint 스크립트를 실행할 수 있습니다.

  • {
      "scripts": {
        ...
        "lint": "eslint . --ext .ts",
      }
    }
    


    CLI에서 실행: npm run lint
  • npm cli를 통해 더 예쁘게 설치

  • npm install --save-dev prettier
    


  • 다음 내용으로 루트 디렉토리에 생성.prettierrc:

  • {
      "semi": true,
      "trailingComma": "none",
      "singleQuote": true,
      "printWidth": 80
    }
    


  • (선택 사항) package.json에 더 예쁜 스크립트를 추가합니다.

  • {
      "scripts": {
        ...
        "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write"
      }
    }
    


    CLI에서 실행: npm run prettier-format
  • VSCode 확장에서 Prettier 및 Eslint를 설치합니다Ctrl + Shift + X.


  • CTRL + Shift + P를 통해 기본값을 설정한 다음 Preferences: Open Settings (JSON)를 선택합니다.


  • 아래 구성 추가(아직 없는 경우)

  • // Default (format when you paste)
    "editor.formatOnPaste": true,
    // Default (format when you save)
    "editor.formatOnSave": true,
    


    이제 cli를 통해 스크립트를 실행하거나 코드 변경 사항을 저장할 때마다 린트하도록 선택할 수 있습니다.

    좋은 웹페이지 즐겨찾기