Recently, I've started using Visual Studio Code for my editor and found the Prettier - JavaScript formatter. I think it's a great plugin because it helps me keep my code looking nice.
I set up Airbnb's ESLint config and have found that to be super helpful.
Here's the catch. The Airbnb ESLint config I'm currently running doesn't play nice with Prettier. For example, for JavaScript string, Prettier is formatted to include double ticks and Airbnb's ESLint like single ticks. When I format the code using Prettier, then Airbnb's ESLint doesn't agree.
I know Kent Dodds has done some work with ESLint configs, among others, example here.
But I can't seem to find a solution that lets me use the magic of Prettier to format my code to Airbnb's ESLint.
I think eslint-config-prettier was created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules
Basically it turns off all rules that have to do with code styling because prettier will take care of it anyway.
So you just install this config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add it to the extends field. For example:
{
"extends": ["airbnb", "prettier"]
}
Here are a few ways to do it, in order of recommendation. I would prefer the first approach as you won't ever have to bother with other rules that might conflict in future.
i) Install eslint-config-prettier and extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier:
{
"extends": [
"airbnb",
"prettier"
]
}
ii) Adding "singleQuote": true to the .prettierrc config file:
{
"singleQuote": true,
...
}
iii) Adding a --single-quote command line option when you invoke Prettier:
$ prettier --single-quote ...
iv) Turn off ESLint's quotes rule within your .eslintrc config file (and potentially others that might conflict):
{
"rules": {
"quotes": "off",
...
}
}
A cleaner way is:
yarn add --dev eslint-plugin-prettier eslint-config-prettier
// .eslintrc
{
"extends": ["airbnb", "plugin:prettier/recommended"]
}
The plugin:prettier/recommended does three things:
Enables eslint-plugin-prettier.
Sets the prettier/prettier rule to "
Extends the eslint-config-prettier configuration.
And then if you are on react, you could add prettier/react too:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
Here is a little interactive CLI tool I built to setup ESLint with Prettier. Just install it and run:
npx eslint-prettier-init
Which will resolve your issue.
So, you have your .eslintrc file, with the property "extends": "airbnb"
Add another property, rules, and the rules that you will write in there will overwrite the ones inherited from airbnb
"extends": "airbnb",
"rules": {
"eqeqeq": 2,
"comma-dangle": 1,
}
Now here I'm just overwriting two random rules, you will need to look for the one you need :)
Related
ESLint is throwing a Parsing error: Unexpected token = error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?
Sample class:
class App extends React.Component{
...
handleClick = (evt) => {
...
}
}
.eslint
{
"ecmaFeatures": {
"jsx": true,
"modules":true,
"arrowFunctions":true,
"classes":true,
"spread":true,
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"strict": 0,
"no-underscore-dangle": 0,
"quotes": [
2,
"single"
],
}
}
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint as a parser. Default parser (Espree) doesn't support experimental features.
First install babel-eslint:
npm i -D babel-eslint
Then add the following to your .eslintrc.json file:
"parser": "babel-eslint"
First install these plugins:
npm i -D babel-eslint eslint-plugin-babel
Then add these settings to your ESLint config file:
{
"plugins": [ "babel" ],
"parser": "babel-eslint",
"rules": {
"no-invalid-this": 0,
"babel/no-invalid-this": 1,
}
}
This way you can use fat arrow class methods plus you will not get any no-invalid-this errors from ESLint.
From what I read in the error message Parsing error: Unexpected token = it looks like more a parser error than linter one.
Assuming you are using Babel as your JavaScript compiler/transpiler and babel-eslint as your ESLint parser, chances are that it is Babel complaining about the syntax, not ESLint.
The issue is not about the arrow functions but something more experimental (ES7??) that I think it is called property initializer or class instance field (or both :) ).
If you want to use this new syntax/feature you need to enable preset-stage-1 in Babel. This preset includes the syntax-class-properties plugin that allows that syntax.
Summing up:
Install babel preset:
npm install babel-preset-stage-1
Add this preset to the list of your presets (I suppose you are already using es2015 and react presets), either in your .babelrc or in your babel-loader query field if you are using webpack.
"presets": ["es2015", "stage-1", "react"]
I came across the same problem today
and #dreyescat 's answer works for me.
By default, babel uses 3 presets: es2015, react, stage-2
Screenshot with "Parsing error: Unexpected token ="
Then if you also select the stage-1preset, the error is gone
Screenshot with no error
You can test it on the bebeljs.io site yourself
2021 Update: Be sure you're using #babel/eslint-parser and not the deprecated babel-eslint
Remove the old package if necessary: yarn remove babel-eslint or npm uninstall babel-eslint
yarn add --dev #babel/eslint-parser or npm install --save-dev #babel/eslint-parser
In .eslintrc add "parser": "#babel/eslint-parser"
Optionally, this answer suggests including "requireConfigFile": false in .eslintrc to prevent eslint from searching for unnecessary config files:
{
...
"parserOptions": {
...
"requireConfigFile": false,
}
}
If this still doesn't work, try checking whether your system is using a globally installed eslint (and removing it).
My other problem was eslint was using a globally installed version instead of my local version, and the global eslint can't access my locally installed babel-eslint parser. Further, since my globally installed eslint was installed on a different version of node, removing it was non-trivial.
Checking if your system is using global versus local eslint.
Install babel-eslint following #spencer.sm's answer for your local eslint.
From the terminal, check if you get different output from running eslint . and npx eslint .. If you get different output it's likely that it's your global eslint running that can't access babel-eslint.
Uninstalling the global eslint
For most people, the following commands should uninstall eslint with npm (uninstall global package with npm) and yarn (uninstall global package with yarn):
# npm
npm uninstall -g eslint
npm uninstall eslint
# yarn
yarn global remove eslint
Next, run npx eslint . to see if things work. If it doesn't, which it didn't for me, you need to take an extra step to remove the globally installed eslint.
From this answer, I learned that I had installed eslint on a system version of Node instead of my current version of Node (I use nvm). Follow these simple steps to remove the global eslint and you should be good to go!
Your sample isn't valid ES6, so there's no way to configure eslint to allow it
As the title says, would it be possible for eslint to show warnings instead of errors on ALL of the rules? I'm using Standard JS, if that information is relevant.
Thanks!
I think there's no out-of-the-box option right now, but maybe you could use a plugin to achieve that:
Eslint plugin only warn
Or set all the rules as warning instead of errors.
Following es-lint-plugin-prettier readme, edit your .eslintrc.json and put a specific rule for prettier:
"rules": {
// maybe your other rules...
"prettier/prettier": "warn"
}
Then, prettier rules will be issued as warnings instead of errors.
Not sure of all the side effects, but it seems to work ok for my project, where I also use #typescript-eslint/eslint-plugin, #typescript-eslint/parser, eslint-config-prettier and eslint-plugin-prettier.
If it helps, my extends config in .eslintrc.json:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
You can create an .eslintrc file with all the rules set to "warn"
If you already have an eslintrc file you can use that, or extend from a rules file such as the one here. In this one, all the rules are set to 0 (disabled). You can modify specific ones or all of them and set them to 1 (or "warn")
I've done the followings to use eslint globally so not repeat on every new project but I am not able to get the eslint plugin part to work. what step am I missing:
installed eslint (& the eslint-plugin-promise ) globally
created a .eslintrc file in my home directory ,and included these in it
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"plugins": [
"promise"
]
}
and I expect that when I run eslint in any directory the plugin to be known.
so in my work directory I add a .eslintrc.json with all the rules I wanted to apply
but I get these errors:
1:1 error Definition for rule 'promise/always-return' was not found promise/always-return
1:1 error Definition for rule 'promise/catch-or-return' was not found promise/catch-or-return
1:1 error Definition for rule 'promise/no-nesting' was not found promise/no-nesting
Now if I add this to local .eslintrc
"plugins": [
"promise",
],
I get this error : ESLint couldn't find the plugin "eslint-plugin-promise".
and recommends me to install it locally. but that's exactly what I want to avoid.
Try to upgrade to the latest version of ESLint and make sure it's configured properly in .eslintrc.json
I have installed ESLint, but as you know, it cannot check jQuery syntax. So I have npm installed:
https://github.com/jquery/eslint-config-jquery/blob/master/readme.md
However, I cannot find ESLint's .eslintrc file in order to edit it. According to the readme file, I should be adding this code to it:
{
"extends": "jquery"
}
How is this done?
according to latest update of ESLint, all you have to do is to add "jQuery" to your env and set it to True.
{
"env" : {
"jquery": true
},
}
I cannot find ESLint's .eslintrc file in order to edit it.
You simply create your own .eslintrc in the root of your project, then you can add the following code to it:
{
"extends": "jquery"
}
You can read more about ESLint configuration files here.
How do I tell an Atom linter, specifically js-standard, to ignore a rule? I want it ignored project-wide, and I thought that I could achieve this with a package.json or a .eslintrc but I can't get either to work. The rule I want to disable is camelcase
I should be able to do this in a package.json file, because the js-standard linter has an option called honorStyleSettings:
Honors style settings defined in package.json.
Current style settings supported:
ignore
parser
What's the syntax of these settings?
For the record, here's how to use js-standard in Atom while selectively disabling a certain rule.
Disable the linter-js-standard Atom package
Install linter-eslint
Add an .eslintrc file:
{
"extends": ["standard"],
"rules": {
"camelcase": 0
}
}
You may also need to install standard and eslint via npm, if you don't have them already.
Using the default install, there is no way to do this in linter-js-standard. (I believe this was a conscious decision on the part of the module authors who believe that standard is a hard target rather than an ideal.)
If you wish to use eslint-style comments to disable linting for certain lines or code sections, install babel-eslint via npm i --save-dev babel-eslint and add
{
...
"standard": {
"parser": "babel-eslint"
}
...
}
to your package.json file which will allow you to annotate your source as needed.
Example
Assuming foo is defined but not used elsewhere in your file, linter will warn: 'foo is assigned a value but never used. (no-unused-vars)'
const foo = 1
After installing babel-eslint, configuring standard in your package.json file, and adding this comment, linter will ignore the line.
const foo = 1 // eslint-disable-line
See Configuring ESLint for other configuration annotations.
I've managed to disable the "camelcase" rule by going to "linter-js-standard" package folder and adding to node_modules/standard/eslintrc.json file the following line:
"rules": { "camelcase": [0] }
So the entire "eslintrc.json" looks like:
{
"extends": ["standard", "standard-jsx"],
"rules": { "camelcase": [0] }
}
Just save or edit your .js file in Atom for the changes to take effect.
On my Linux desktop the full path to eslintrc.json is:
~/.atom/packages/linter-js-standard/node_modules/standard/eslintrc.json
Of course, when you update the "linter-js-standard" package in Atom, you'll have to do the above steps again.
To turn the "camelcase" rule on you may change the "camelcase" value to [2] instead of deleting the entire "rules" line:
"rules": { "camelcase": [2] }
If it is ESlint that your plugin uses then create a .eslintrc file in the root of your project & write your rules within there.
Heres an example of a .eslintrc file github example. I find i need to close and reopen Atom to refresh the lint errors
EDIT:
showEslintRules (default: false). You will need to change this option to true.