ESLint is important for a good developer experience.
This article describes how to set up TypeScript + ESLint.
Install ESLint
npm install --save-dev eslint
Install plugins for TypeScript
npm install --save-dev @typescript-eslint/parser
npm install --save-dev @typescript-eslint/eslint-plugin
Install plugins for Prettier
Prettier is pretty code formatter.
Sometimes, however, Prettier's code format conflicts with eslint rules.
eslint-config-prettier
solves that problem.
npm install --save-dev prettier eslint-config-prettier
Install plugins for import
npm install --save-dev eslint-plugin-import
Settings
# .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"
}
]
}
]
}
}
Add command into a package file
# package.json
"scripts": {
"lint": "eslint **/*.ts"
},
Run
npm run lint
Visual Studio Code
# .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
}
Top comments (0)