This article is a continuation of Next.js, Typescript and TailwindCSS
Alright, one of the first things I usually install in my pet project is Prettier and ESLint.
First things first, lets start with ESLint. To install open your project folder and run:
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y --save-dev
What are those packages?
eslint
is the main ESLint package
@typescript-eslint/parser
will allow ESLint to parse TypeScript files
@typescript-eslint/eslint-plugin
will add TypeScript specific lint rules
eslint-plugin-react
will add React specific lint rules
eslint-plugin-react-hooks
will extend eslint-plugin-react
to add React Hooks rules
eslint-plugin-jsx-a11y
will add accessibility related rules
To configure ESLint we need to create a .eslintrc.js
file:
touch .eslintrc.js
This is the configuration we'll be using:
module.exports = {
root: true,
env: {
node: true,
es6: true,
},
parserOptions: { ecmaVersion: 8 },
ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'],
extends: ['eslint:recommended'],
overrides: [
{
files: ['**/*.ts', '**/*.tsx'],
parser: '@typescript-eslint/parser',
settings: { react: { version: 'detect' } },
env: {
browser: true,
node: true,
es6: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:jsx-a11y/recommended',
],
rules: {
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
'@typescript-eslint/explicit-function-return-type': [
'warn',
{
allowExpressions: true,
allowConciseArrowFunctionExpressionsStartingWithVoid: true,
},
],
},
},
],
}
To install Prettier run:
npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev
To configure Prettier is easier than ESLint, we still need to create a file to be able to configure it:
touch .prettierrc.js
Our configuration will look like:
module.exports = {
semi: false,
trailingComma: 'es5',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
useTabs: false,
jsxBracketSameLine: false,
bracketSpacing: true,
}
I advice you take a look at Prettier options.
Lets configure ESLint and Prettier together, open .eslintrc.js
and update
both the extends
and rules
options:
module.exports = {
// ...
overrides: [
{
// ...
extends: [
// ...
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
rules: {
// ...
'prettier/prettier': ['error', {}, { usePrettierrc: true }],
},
},
],
}
The beauty of this is this one, create a file for settings.json
inside a .vscode
folder:
touch .vscode/settings.json
And put this in it:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true
}
Now when saving it should auto-format your files according with the rules we previously set. If you want you can check the whole code in this repo.
That's it ✌🏻