ESLint Config Turbocharge

The purpose of this config is to keep extremely easy to use ESLint, Typescript, and Prettier in any project.

About

ESLint - this is the best tool in the world that improves your Javascript code. It acts as a guide showing you good practices and helping you to avoid unnecessary issues.

Prettier - allows you to keep your code style consistent between many environments and many projects.

Typescript - is another excellent tool that could be helpful in our daily work - this one is bringing to us static typings.

The only disadvantage of them is that they are not very easy to configure, especially if you want to connect them with React or some other framework. This project tries to solve this problem.

Install
Setting up a basic project
Setting up a React project
Setting up a Node project
Setting up a project with Node and React
What's inside

Install

The first thing you have to do is to remove all eslint dependencies (including plugins, almost everything that contains eslint in the name) from your package.json. Now, you can install this package:

npm i --save-dev eslint-config-turbocharge

Configuration

This config contains a few presets for different kinds of projects:

react
nodejs
react-native (TODO)

Setting up a basic project

Let's say that you have a project structure like this and already installed eslint-config-turbocharge:

your-project
├── package.json
├── config.js
├── src
│ ├── A.ts
│ └── B.ts
└── node_modules

To enable eslint - you will need proper .eslintrc, for typescript - tsconfig.json and for prettier - .prettierrc

.eslintrc

{ "extends": "turbocharge", "root": true }

.tsconfig.json

{  "extends": "eslint-config-turbocharge/node/tsconfig.json" }

.prettierrc

"eslint-config-turbocharge/prettier"

Our example project should look like this:

your-project
├── package.json
├── .eslintrc          <== new
├── .prettierrc        <== new
├── .tsconfig.json     <== new
├── config.js
├── src
│ ├── A.ts
│ └── B.ts
└── node_modules

Now everything is set up.

Setting up a React project

We are going to use a project structure the same as for Basic setup. But now src folder will contain React components.

your-project
├── package.json
├── .eslintrc
├── .prettierrc
├── .tsconfig.json
├── config.js
├── src
│ ├── .tsconfig.json     <== new
│ ├── .eslintrc          <== new
│ ├── App.tsx
│ └── Navbar.tsx
└── node_modules

.eslintrc

{ "extends": "turbocharge/react", "root": true }

.tsconfig.json

{  "extends": "eslint-config-turbocharge/react/tsconfig.json" }

First we are going to put additional .tsconfig.json and .eslintrc files inside src folder, also with "root": true property - this is crucial.

This way we change eslint/typescript behavior only for src files. Top-level files like config.js (i.e. webpack.config.js) will not report any problems related to React rules.

Setting up a Node project

We are going to use a project structure the same as for Basic setup. But now src folder will contain Node files.

your-project
├── package.json
├── .eslintrc
├── .prettierrc
├── .tsconfig.json
├── config.js
├── src
│ ├── .eslintrc          <== new
│ ├── service.ts
│ ├── server.ts
│ └── controller.ts
└── node_modules

.eslintrc

{ "extends": "turbocharge/node", "root": true }

We just need to put .eslintrc file inside src folder, with "root": true property - this is crucial.

This way we change eslint behavior only for src files. Top-level files like config.js (i.e. webpack.config.js) will not report any problems related to Node rules.

Setting up a project with Node and React

Looking at React and Node examples, we can try to mix them up in project which contain both React and Node code.

Example project structure based on Basic project:

your-project
├── package.json
├── .eslintrc
├── .prettierrc
├── .tsconfig.json
├── config.js
├── src-backend
│ ├── .eslintrc          <==
│ ├── service.ts
│ ├── server.ts
│ └── controller.ts
├── src-frontend
│ ├── .tsconfig.json     <==
│ ├── .eslintrc          <==
│ ├── service.ts
│ ├── server.ts
│ └── controller.ts
└── node_modules

.eslintrc

{ "extends": "turbocharge/node", "root": true }

.eslintrc

{ "extends": "turbocharge/react", "root": true }

.tsconfig.json

{  "extends": "eslint-config-turbocharge/react/tsconfig.json" }

Simple as that.

Explanations

"root": true - makes you sure that the only config you are using is defined in that file.

What's inside

This project does not contain any new eslint-rules, it is just a set of correctly preconfigured rules of the modules that are listed below:

Common:

React:

NodeJS:

https://www.npmjs.com/package/eslint-plugin-node

Authors and Contributors

@q-nick

q-nick / eslint-config-turbocharge Goto Github PK