Using all the tools, all at once.
Run yarn install for initial setup.
To use prettier with TSLint you will need tslint-config-prettier which disables all the conflicting rules and optionally tslint-plugin-prettier which will highlight differences as TSLint issues.
Example configuration:
{
"rulesDirectory": ["tslint-plugin-prettier"],
"extends": [
"tslint:recommended",
"tslint-config-airbnb",
"tslint-react",
"tslint-config-prettier"
],
"linterOptions": {
"exclude": ["config/**/*.js", "node_modules/**/*.ts"]
},
"rules": {
"prettier": true
}
}{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false
}Why? ESLint ecosystem is rich, with lots of different plugins and config files, whereas TSLint tend to lag behind in some areas.
To remedy this nuisance there is an eslint-typescript-parser which tries to bridge the differences between javascript and typescript. It still has some rough corners, but can provide consistent assistance with certain plugins.
Example configuration:
{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:prettier/recommended",
"plugin:jest/recommended",
"plugin:unicorn/recommended"
],
"plugins": ["prettier", "jest", "unicorn"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"jest": true
},
"rules": {
"react/jsx-filename-extension": "off",
"unicorn/filename-case": "off",
"import/extensions": { "ts": "never", "tsx": "never" },
"no-use-before-define": "warn",
"no-param-reassign": "warn"
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"parser": "typescript-eslint-parser",
"rules": {
"no-undef": "off"
}
}
]
}