ESLINT + PRETTIER + VSCODE
PRO TIP
1. Install npm libs
2. Config eslint
3. Config VSCode
Index
Install npm libs
yarn add eslint --dev
yarn add eslint-config-prettier --dev
yarn add eslint-plugin-react --dev
yarn add eslint-plugin-react-hooks --dev
# or
npm i eslint -D
npm i eslint-config-prettier -D
npm i eslint-plugin-react -D
npm i eslint-plugin-react-hooks -DConfig ESLINT
module.exports = {
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
"plugin:jest/recommended",
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
settings: {
react: {
version: 'detect'
}
},
env: {
browser: true,
node: true,
es6: true
},
plugins: ['@typescript-eslint', 'react', 'jest'],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module' // Allows for the use of imports
},
rules: {
'react/prop-types': 'off', // Disable prop-types as we use TypeScript for type checking
'@typescript-eslint/explicit-function-return-type': 'off'
},
overrides: [
// Override some TypeScript rules just for .js files
{
files: ['*.js'],
rules: {
'@typescript-eslint/no-var-requires': 'off' //
}
}
]
};Config PRETTIER
{
"endOfLine": "lf",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5"
}PRO TIP - COSMICONFIG
[
'package.json',
`.${moduleName}rc`,
`.${moduleName}rc.json`,
`.${moduleName}rc.yaml`,
`.${moduleName}rc.yml`,
`.${moduleName}rc.js`,
`${moduleName}.config.js`,
]Install Plugins in VSCode
Config VSCode
file > preferences > settings
[
"javascript.format.enable": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"tslint.autoFixOnSave": false,
]Live errors free

Thanks !
ESLINT - PRETTIER
By sejas
ESLINT - PRETTIER
- 139