TypeScript + ESLint 설정 방법
10113 단어 prettierjavascripttypescripteslint
이 문서에서는 TypeScript + ESLint를 설정하는 방법을 설명합니다.
ESLint 설치
https://eslint.org/
npm install --save-dev eslint
TypeScript용 플러그인 설치
npm install --save-dev @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin
Prettier용 플러그인 설치
https://prettier.io/
Prettier는 예쁜 코드 포맷터입니다.
그러나 때로는 Prettier의 코드 형식이 eslint 규칙과 충돌합니다.
eslint-config-prettier
그 문제를 해결합니다.npm install --save-dev prettier eslint-config-prettier
가져오기용 플러그인 설치
npm install --save-dev eslint-plugin-import
설정
# .eslintrc.json
{
"extends": [
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:import/errors"
],
"rules": {
"react/jsx-props-no-spreading": "off",
"import/prefer-default-export": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal",
["parent", "sibling"],
"object",
"type",
"index"
],
"newlines-between": "always",
"pathGroupsExcludedImportTypes": ["builtin"],
"alphabetize": { "order": "asc", "caseInsensitive": true },
"pathGroups": [
{
"pattern": "{react,react/**,react-dom/**,next,next/**}",
"group": "external",
"position": "before"
},
{
"pattern": "@/**",
"group": "internal",
"position": "before"
},
{
"pattern": "./**.module.css",
"group": "index",
"position": "after"
}
]
}
]
}
}
패키지 파일에 명령 추가
# package.json
"scripts": {
"lint": "eslint **/*.ts"
},
운영
npm run lint
비주얼 스튜디오 코드
# .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
Reference
이 문제에 관하여(TypeScript + ESLint 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jtakahashi64/eslint-settings-for-typescript-1o36텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)