This repository contains configuration files for the linters we use in Tinkoff. It includes:
- configs and rules for ESLint
- configs and rules for TSLint (deprecated)
- configs for Stylelint
- configs for Prettier
- Install
- ESLint + Prettier
- Stylelint
- Husky + lint-staged (recomended)
- TSLint (deprecated)
- VS Code
- Troubleshooting
- Custom rules for TSLint
- Badge
Stable version (no eslint
support, just tslint
)
$ npm install @tinkoff/linters --save-dev
Try our beta with ESLint!
$ npm install @tinkoff/linters@beta --save-dev
You don't need to install
eslint
,tslint
,prettier
orstylelint
, they are added as dependencies of@tinkoff/linters
and will be installed automatically.
If you have any of those deps or experiencing problems
Run following in your project:
npm uninstall $(node -e 'const p=require("./package");console.log(Object.keys(p.dependencies||[]).concat(Object.keys(p.devDependencies||[])).filter(name=>/eslint|stylelint|prettier|tslint/.test(name)).join(" "))')
This preset is compatible with any and ES Modules based project, written in TS
and/or ES6+
. No matter is it node
/react
or angular
.
For now there is additional angular
rules available, and we planning to add RxJS
rules in near future.
Add following files in your project:
.eslintrc.js
module.exports = {
extends: [
'./node_modules/@tinkoff/linters/eslint/base/prettier',
'./node_modules/@tinkoff/linters/eslint/angular',
],
};
.prettierrc.js
module.exports = {
...require('@tinkoff/linters/prettier/prettier.config'),
};
Add npm-script:
"lint:es": "eslint --fix \"src/**/*.{ts,js}\"",
"lint:es:ci": "eslint --format ./node_modules/eslint-teamcity/index.js \"src/**/*.{ts,js}\"",
Add .eslintignore
file.
Don't add
.ts
/.js
files to.prettierignore
because it isn't used by prettier in this setup.
(alternatively) External prettier
In this case you should have both
.eslintignore
and.prettierignore
files
You need to use different base config:
.eslintrc.js
module.exports = {
extends: [
'./node_modules/@tinkoff/linters/eslint/base',
'./node_modules/@tinkoff/linters/eslint/angular',
],
};
.prettier.config.js
module.exports = {
...require('@tinkoff/linters/prettier/prettier.config'),
};
Add npm-script:
"prelint:es": "prettier --write \"src/**/*.{ts,js}\"",
"lint:es": "eslint --fix \"src/**/*.{ts,js}\"",
"prelint:es:ci": "prettier --check \"src/**/*.{ts,js}\"",
"lint:es:ci": "eslint --format ./node_modules/eslint-teamcity/index.js \"src/**/*.{ts,js}\"",
You should extend your Stylelint configs with only one bases
config:
.stylelintrc
{
"extends": ["@tinkoff/linters/stylelint/bases/prettier.stylelint.json"]
}
Add npm-script:
"lint:less": "stylelint --config .stylelintrc --fix \"src/**/*.less\"",
"lint:less:ci": "stylelint --config .stylelintrc --custom-formatter=node_modules/stylelint-teamcity-reporter \"src/**/*.less\"",
$ npm i husky lint-staged --save-dev
.huskyrc.json
{
"hooks": {
"pre-commit": "lint-staged"
}
}
.lintstagedrc.json
{
"src/**/*.{ts,js}": ["eslint --fix", "git add"],
"src/**/*.less": ["prettier --write", "lint:less", "git add"],
"src/**/*.{md,json,template.html}": ["prettier --write", "git add"]
}
You dont have to add trailing
git add
when usinglint-staged@10+
. See in its docs.
TSLint no longer supported. See roadmap.
Installation
For TSLint and Stylelint configs we use bases/mixins
concept. You should extend your TSLint and Stylelint configs with only one bases
config, and any number of mixins
configs.
Example of tslint.json
file in your project:
{
"extends": [
"@tinkoff/linters/tslint/bases/prettier.tslint.json",
"@tinkoff/linters/tslint/mixins/rxjs5.5.tslint.json", // For RxJs 5.5
"@tinkoff/linters/tslint/mixins/rxjs6.tslint.json" // For RxJS 6+
]
}
Eslint work with .ts
files "out-of-the-box", just install extension:
- Install eslint extension
By default tsconfig.json
is expected in the same root folder as .eslintrc.js
.
If you have tsconfig.json
somewhere in your subfolder you must create additional .eslintrc.js
in the same folder with your tsconfig.json
.
.eslintrc.js
module.exports = {
parserOptions: {
tsconfigRootDir: __dirname,
},
};
- Make sure that you have
.ts[x]
file from the error is included in your root./tsconfig.json
.- If you dont want to include all
.ts
files in root config then read previous tip.
- If you dont want to include all
- OR Update config:
.eslintrc.js
module.exports = { extends: [ './node_modules/@tinkoff/linters/eslint/base', './node_modules/@tinkoff/linters/eslint/angular', ], + parserOptions: { + createDefaultProgram: true, // Allows to work with non-ts files + }, }
createDefaultProgram
may cause performance issues
-----
We follow some rules which are not implemented in TSLint. So we implemented them ourselves.
tinkoff-angular-member-ordering
tinkoff-condition-breaks
tinkoff-method-return-type
tinkoff-new-line-after-variable-declaration
tinkoff-new-line-around-control-statement
We arrange members of Angular components in the following order:
- public static members;
- members decorated with
@Input()
(both fields and setters); - members decorated with
@Output()
; - other public members;
- protected static members;
- protected instance members;
- private static members;
- private members.
When a ternary operator contains complex expressions, it becomes difficult to read and understand. In that case we divide it into several lines.
// bad
const defaultQuestionnaire =
this.isCompany || this.accountIsBlocked
? defaultQuestionnaireCompany && 'super text'
: defaultQuestionnaireIp;
// good
const result = isShown ? [] : null;
If a function or a method returns result, we must specify its type. The only exception is the arrow functions. For them it is not necessary.
class User {
constructor(name: string, age: number) {}
// good
getStatus(): string {}
// bad
getFullname() {}
// ok
setStatus(status: string) {}
}
// bad
function getAge() {
return 50;
}
// good
function getName(): string {
return 'Bob';
}
// good
const doSomething = () => {
return 'done';
};
We separate variable declarations from the previous and subsequent code with an empty string. But we do not add an empty line before the first variable inside the block.
// bad
const a = 1;
let b = 2;
b += a;
// good
const a = 1;
let b = 2;
b += a;
function getStatus() {
const status = 'ok'; // no new line before const, it is ok
...
}
Also we separate control statements (for, if, return, etc) from the previous and subsequent code with an empty string. But we do not add an empty line before the first variable inside the block.
function doSomething(count: number): number {
if (age > 30) {
}
for (let i = 0; i < 10; i++) {}
return {name, age};
}
Show that you use @tinkoff/linters
in your project
[![code style: @tinkoff/linters](https://img.shields.io/badge/code%20style-%40tinkoff%2Flinters-blue)](https://github.com/TinkoffCreditSystems/linters)