I've an existing React/Redux project and I've started using typescript in my project. I've already setup my eslint configuration for the project which extends the airbnb eslint configurations. My eslint is as follows:
module.exports = {
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:flowtype/recommended"
],
"plugins": [
"react",
"jsx-a11y",
"flowtype"
],
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"__DEV__": true,
"__SERVER__": true,
"__": true,
"define": true,
"describe": true,
"expect": true,
"require": true,
"test": true,
},
"ecmaFeatures": {
"arrowFunctions": true,
"binaryLiterals": true,
"blockBindings": true,
"classes": true,
"defaultParams": true,
"destructuring": true,
"forOf": true,
"generators": true,
"modules": true,
"objectLiteralComputedProperties": true,
"objectLiteralDuplicateProperties": true,
"objectLiteralShorthandMethods": true,
"objectLiteralShorthandProperties": true,
"octalLiterals": true,
"regexUFlag": true,
"regexYFlag": true,
"spread": true,
"superInFunctions": true,
"templateStrings": true,
"unicodeCodePointEscapes": true,
"globalReturn": true,
"jsx": true
},
"rules": {
// Strict mode
"strict": [
2,
"never"
],
// Code style
"quotes": [
2,
"single"
],
"arrow-parens": [
2,
"as-needed"
],
// Key Spacing
"key-spacing": 0,
// Best practices
"block-scoped-var": 1,
"dot-notation": 1,
"no-confusing-arrow": 1,
"no-else-return": 1,
"no-eval": 1,
"no-extend-native": 1,
"no-extra-bind": 1,
"no-lone-blocks": 1,
"no-loop-func": 1,
"no-multi-spaces": 0,
"no-param-reassign": [
"error",
{
"props": false
}
],
"vars-on-top": 1,
"max-statements": [
1,
20
],
"no-underscore-dangle": 0,
"no-undef": 1,
"no-unused-vars": 1,
"indent": [
1,
2,
{
"SwitchCase": 1
}
],
//React specific rules
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/forbid-prop-types": 0,
"react/no-unused-prop-types": 1,
//Overwriting airbnb stylings
"array-bracket-spacing": 0,
"comma-dangle": [
2,
"always-multiline"
],
"func-names": 0,
"jsx-quotes": [
2,
"prefer-double"
],
"max-len": [
2,
200,
2,
{
"ignoreUrls": true,
"ignoreComments": false
}
],
"no-console": 0,
"one-var": 0,
"prefer-const": 1,
"react/jsx-no-bind": 1,
"react/require-default-props": 0,
"space-in-parens": 0,
"spaced-comment": 0,
"no-multi-assign": 0,
//Import rules
"import/extensions": [
2,
{
"js": "never"
}
],
"import/no-unresolved": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default-member": 0,
"import/first": 0,
//Keeping below till idea supports these codestyles
"object-curly-spacing": 0
},
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"settings": {
"flowtype": {
"onlyFilesWithFlowAnnotation": true
},
"import/resolver": "webpack"
}
};
Now, as I'm using typescript, I want this eslint configuration to work on my typescript files as well (or similar tslint) but I don't want to create any other tslint file because then if I'll need to update then I'll have to update at 2 places. Also, I'd want to add prettier in VSCode. So, my questions are:
Answering the three bullets in order...
Now that you're on TypeScript it'd be a good idea to switch to TSLint over ESLint. TSLint benefits from access to much richer type information using the TypeScript APIs, so its rules can be more powerful than ESLint's. For example, it has rules that can stop you from accidentally mishandling Promises, improperly comparing wrong types of variables, or iterating over arrays the wrong way.
See http://palantir.github.io/tslint for documentation and http://palantir.github.io/tslint/rules for the list of rules you can enable. There are a couple few projects that can fill in the gap for TSLint, as ESLint has some more rules, mainly:
VS Code has an extension for ESLint and an extension for TSLint. Whichever you end up choosing, you can install that extension and it'll pick up on whichever configuration your project has.
It's also a good idea to add a .vscode/settings.json file to fine-tune your project's behavior in VS Code. Specifically for TSLint, at least this setting tends to help:
{
"tslint.alwaysShowRuleFailuresAsWarnings": true
}
That will tell VS Code to always show TSLint rules with green squigglies instead of red, so you can tell what's a TypeScript complaint (red) verses a TSLint complaint (green).
Great choice! Both ESLint and TSLint have default rulesets available that you can extend from to disable all lint rules that might conflict with or otherwise be redundant with Prettier.
For ESLint, see this page: https://prettier.io/docs/en/eslint.html. In summary, you can either use eslint-plugin-prettier to have ESLint run Prettier itself, or use the eslint-config-prettier package to disable ESLint's formatting rules.
In your .eslintrc.json:
{
"extends": ["prettier"]
}
For TSLint, only tslint-config-prettier is available, which you can use to disable TSLint's formatting rules. https://www.npmjs.com/package/tslint-config-prettier.
In your tslint.json, you can extend from the tslint-config-prettier package:
{
"extends": [
"tslint-config-prettier"
]
}