Take it easy. This is still under construction.
There are files .eslintrc.js, .eslintignore, .prettierrc.js and .prettierignore ready to be downloaded with some rules that will fit our develpment (we hope). Some rules already exist in eslint:recommended.
The structure of this section includes:
TODO: configure stylelint.
This steps aim to help you install the necessary dependencies to run ESLint in your TypeScript projects. A linter is a program that analyses your source code for possible programmatic and styling errors.
In spite of TSLint is currently the standard of linting TypeScript, this will change and ESLint will soon replace TSLint. This means that TSLint will be deprecated. Check Palantir's blog post about TSLint in 2019.
ESLint is the most popular JavaScript linter, a tool that analyzes code for errors.
Prettier is a code formatter that helps you to not worry about code formatting again. Installing Prettier in the editor, it will take care of formatting for you.
Prettier and ESLint complement each other. Prettier scans your files for style issues and automatically reformats your code to ensure consistent rules are being followed for indentation, spacing, semicolons, single quotes vs double quotes, etc. ESLint performs automated scans of your JavaScript files for common syntax and style errors.
We run Prettier as an ESLint rule and repports differences as individual ESLint issues.
Install dev dependencies:
# using npm
$ npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
# or using yarn
$ yarn add --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin- eslint: the core ESLint linting library;
- @typescript-eslint/parser: the parser that will allow ESLint to lint TypeScript code;
- @typescript-eslint/eslint-plugin: a plugin that contains a bunch of ESLint rules that are TypeScript specific.
You can create .eslintrc file manually, later, or initialize ESLint for project with:
$ ./node_modules/.bin/eslint --initInstall dev dependencies:
# using npm
$ npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
# or using yarn
$ yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier- prettier: the core prettier library;
- eslint-config-prettier: disables ESLint rules that might conflict with prettier;
- eslint-plugin-prettier: runs prettier as an ESLint rule.
The advantage of having prettier setup as an ESLint rule using eslint-plugin-prettier is that code can automatically be fixed using ESLint's --fix option`
Now we need to create a .eslintrc file in our project root folder and tell ESLint how to deal with TypeScript. It can be JSON file (.eslintrc.json) or JavaScript file (.eslintrc.js). This configs will prefer using .eslintrc.js over a JSON file, because it lets you leave comments in your configuration.
module.exports = {
// Specifies the ESLint parser
parser: '@typescript-eslint/parser',
extends: [
// Uses the recommended rules from the @typescript-eslint/eslint-plugin
'plugin:@typescript-eslint/recommended',
// Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'prettier/@typescript-eslint',
// Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
'plugin:prettier/recommended',
],
plugins: [
// https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
'@typescript-eslint',
],
parserOptions: {
// Allows for the parsing of modern ECMAScript features
ecmaVersion: 2018,
// Allows for the use of imports
sourceType: 'module',
},
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
'prettier/prettier': ['error', { singleQuote: true, parser: 'flow' }],
},
};In GitHub are some rules for TS files. And also more rules for ESLint.
Next, you’ll need some configuration files to ignore a bunch of stuff we don’t want to lint with .eslintignore:
node_modules/*
In order to configure Prettier, a .prettierrc.js file is required at the root project directory.
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
};And also a ignore for prettier, .prettierignore:
package-lock.json
node_modules/*
{
...
"lint": "eslint --fix . && echo 'Lint complete.'",
...
}Then you can run npm run lint.
Update your settings.json (Settings > Extensions > ESLint > settings.json):
{
"eslint.validate": [
"javascript",
{
"language": "typescript",
"autoFix": true
},
],
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
}This allows you to run ESLint's automatic fix command (i.e. eslint --fix) whenever a file is saved.
Vim-prettier is a plugin wrapper for prettier, pre-configured with custom default prettier settings.
Use this tutorial.
Use this tutorial.