ESLint & Prettier Configuration Files

ESLint & Prettier configurations for quick starting different type of JavaScript projects.

Table of contents

1. General Info
2. Instructions
3. Base
4. React
5. Attributions
6. Notes

General Info

📙 Note: All these configurations are based on the Airbnb JavaScript Style Guide.

All the configuration files include Prettier in their "extends" key, this will disable all ESLint formatting rules that interfere with Prettier and leave the formatting responsibility only to Prettier.

We make use of the .prettierrc.json file to enforce the default configuration of Prettier (among any other rules defined inside it), preventing any possible non-desired configuration variations inside the Visual Studio Code extension among developers.

For more information about Prettier, follow this link to the official site.

For more information about configuring ESLint, follow this link to the official site.

⬆️ Back to top

Instructions

1. Copy and paste the corresponding .eslintrc.json file inside your project's root directory.
2. Copy and paste the .prettierrc.json file in your project's root directory.
3. Install the required dependencies specified for your type of project on each section.

💡 TIP: You can add the following scripts to your package.json to run ESLint and Prettier from your terminal.

1. Run ESLint on all .js, .jsx, .cjs, .mjs, .ts, .tsx, .cts, and .mts files in the whole project (run this command from the project's root directory).

   "scripts": {
        "lint": "npx eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\" --report-unused-disable-directives --max-warnings 0",
        "lint:fix": "npx eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\" --report-unused-disable-directives --max-warnings 0 --fix"
    }

2. Run Prettier on all supported files in the whole project (run this command from the project's root directory).

   "scripts": {
        "prettier": "npx prettier . --check",
        "prettier:write": "npx prettier . --write"
    }

It is highly recommended to install the official ESLint extension and Prettier extension for Visual Studio Code to have real-time automatic linting and formatting.

❗️ WARNING: If you are not using ECMAScript modules (you don't have "type": "module" in your package.json), you'll need to remove "sourceType": "module" from .eslintrc.json

⬆️ Back to top

Base (Vanilla JS)

You can use this config if you just want to use JavaScript without any specific framework.

• .eslintrc.json

• .prettierrc.json

Dependencies for Base

Make sure to install all the required dependencies:

npm install eslint eslint-config-airbnb-base eslint-config-prettier -D

npm install prettier -D -E

⬆️ Back to top

React

You can use this config if you want to use React.

• .eslintrc.json
• .prettierrc.json

Dependencies for React

Make sure to install all the required dependencies:

npm install eslint eslint-config-airbnb eslint-config-prettier -D

npm install prettier -D -E

⬆️ Back to top

Attributions

• JavaScript icons created by Freepik - Flaticon.

• React icons created by Samat Odedara - Iconfinder.

• Prettier icons created by VSCode Icons - Icons For Free.

⬆️ Back to top

Notes

• More project-specific configurations may be added in the future.

⬆️ Back to top