M C
2 min readMay 2, 2018

--

Why not have them all together :)
Standard JS with Prettier and eslint fix.

I’m using Atom IDE but this can be applied to VSCode and Sublime also.

npm i -D babel-eslint standard eslint prettier-eslint

Packages: prettier-eslint, babel-eslint
When installing eslint follow this guide to generate the eslintrc file (below you will find the updated standard compatible version). When generating the file make sure to choose SPACES as indentation, SINGLE as quotes, answer with NO for semicolons.

In package.json set the standard parser to babel-eslint:

"standard": {
"parser": "babel-eslint"
}

Generate eslintrc file and edit the configuration to be compatible with Standard JS (and react in my case):

{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["error", 2, { "SwitchCase": 1 }],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "never"],
"space-before-function-paren": ["error", "always"],
"jsx-quotes": ["error", "prefer-single"],
"generator-star-spacing": ["error", {"before": true, "after": true}]
}
}

For the atom packages, you should have Prettier with updated settings:

  1. Enable eslint integration
  2. Update the prettier options

I have linter-js-standard installed as atom package among the other linter packages.

Having all of this configured you should be up and running with Standard JS, ESlint and Prettier. You can set the package to lint on save, prettier will do its job and then eslint will fix the file for Standard JS compatibility by the rules set in eslintrc.

I hope this will help someone out with the linting setup.

--

--