eslint-config-with-prettier

These are my default ESLint and Prettier settings ⚡️

Based on Upstatement's ESLint and prettier configurations. Check their documentation on Prettier configuration and ESLint configuration.

Installation

1. We need to install everything needed by the config:

# using npx

npx install-peerdeps --dev @ryuuto829/eslint-config-with-prettier

# OR using npm

npm install --save-dev @ryuuto829/eslint-config-with-prettier eslint babel-eslint prettier eslint-config-prettier eslint-plugin-prettier

# OR using yarn

yarn add --dev @ryuuto829/eslint-config-with-prettier eslint babel-eslint prettier eslint-config-prettier eslint-plugin-prettier

2. Create an .eslintrc file at the root of your project with the following:

{
  "extends": ["@ryuuto829/eslint-config-with-prettier"]
}

3. Create a prettier.config.js file at the root of your project that contains:

module.exports = require('@ryuuto829/eslint-config-with-prettier/prettier');

4. (Optional) Add .editorconfig file to the root of the project:

# This file is for unifying the coding style for different editors and IDEs
# Read more: http://editorConfig.org

# Top-most EditorConfig file
root = true

# Global
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

5. (Optional) You can add two scripts to your package.json to lint and/or fix:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},

Using with React

1. Install additional dependencies:

# If project includes deafult config

yarn add --dev eslint-plugin-react eslint-plugin-jsx-a11y

# OR initiate empty project with react config

yarn add --dev @ryuuto829/eslint-config-with-prettier eslint babel-eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-jsx-a11y

2. Create an .eslintrc file at the root of your project with the following:

{
  "extends": ["@ryuuto829/eslint-config-with-prettier/react"]
}

Pre-commit Hook

You can use lint-staged with husky, which manages git hooks and automatically fix your errors on commit.

1. Install following dependencies:

yarn add --dev lint-staged husky

2. Update your package.json like this:

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,json,md}": [
      "prettier --write"
    ],
    "*.js": [
      "eslint --fix"
    ]
  }

Specifying Environments

{
  "extends": ["@ryuuto829/eslint-config-with-prettier"],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  }
}

Integration with Visual Studio Code

1. Install Prettier extension: View → Extensions then find and install Prettier - Code formatter.
2. Install the ESLint extension: View → Extensions then find and install ESLint.
3. Reload the editor.
4. In your user settings:

// Format on save with Prettier rules
"editor.formatOnSave": true,
// Tell the ESLint plugin to run on save
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }