@pauloelias/eslint-config-javascript-standard-react
ESLint and Prettier config for React projects.
Last updated a year ago by pauloelias .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @pauloelias/eslint-config-javascript-standard-react 
SYNC missed versions from official npm registry.

ESLint and Prettier Setup for React

These are the core packages and settings I use for ESLint and Prettier with React.

They are a slightly opinionated and have been fine-tuned while working with modern JavaScript and react. This config can be easily extended to accomodate how you and/or your team work.

This package is heavily inspired by Wes Bos's No-Sweat™ Eslint and Prettier Setup... hence the blatant rip-off of his documentation (thanks Wes!).

What it Does

Custom rules can be found in the .eslintrc.js file. You can overwrite any of these settings or fork the entire thing to create your own.

Installing

You can install this package locally (per project) or globally.

Ideally you will want to install this locally per project so that you can have project-specific settings for everyone working on the project.

Installing this package globally allows you to lint and format ad-hoc JavaScript files and projects too. It's nice if you want to spin up a quick protoype or a throwaway project to work through a quick idea.

Local/Per Project Install

  1. If you don't have a package.json file, initialize your project with yarn init or npm init

  2. Install the package and its peer dependencies:

yarn add --dev eslint prettier @pauloelias/eslint-config-javascript-standard-react
npm install --save-dev eslint prettier @pauloelias/eslint-config-javascript-standard-react
  1. Create an .eslintrc file in the root of your project (alongside your package.json) and add the following:
{
  "extends": ["@pauloelias/eslint-config-javascript-standard-react"]
}
  1. Add the follwing scripts to your package.json file:
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
}
  1. You can lint and/or fix your code manually by running these scripts:
yarn run lint
yarn run lint:fix
npm run lint
npm run lint:fix

Global Install

  1. Install the package and its peer dependencies globally:
yarn global add eslint prettier @pauloelias/eslint-config-javascript-standard-react
npm install -g eslint prettier @pauloelias/eslint-config-javascript-standard-react
  1. Add a global .eslintrc file:

ESLint will look for one in your home directory:

  • ~/.eslintrc for mac
  • C:\Users\username\.eslintrc for windows

Your .eslintrc file should look like this:

{
  "extends": ["@pauloelias/eslint-config-javascript-standard-react"]
}

To use from the CLI, you can now run eslint . or configure your editor (below under "Settings").

Settings

If you'd like to overwrite eslint or prettier settings, you can add the rules in your .eslintrc file. The ESLint rules go directly under "rules" while prettier options go under "prettier/prettier". Note that prettier rules overwrite anything in this config (removing semicolons, and using single quotes), so you'll need to include those as well.

{
  "extends": ["@pauloelias/eslint-config-javascript-standard-react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": false,
        "singleQuote": true
      }
    ]
  }
}

VS Code Settings

Once you have done one, or both, of the above installs. You probably want your editor to lint and fix issues for you. Here are the instructions for VS Code:

  1. Install the ESLint package
  2. Now we need to setup some VS Code settings via Code/FilePreferencesSettings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.autoFixOnSave": true,
// Optional BUT IMPORTANT: If you have the Prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
  "javascript",
  "javascriptreact"
]
}

Current Tags

  • 1.1.0                                ...           latest (6 months ago)

9 Versions

  • 1.1.0                                ...           6 months ago
  • 0.0.10                                ...           6 months ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |