Develop Reference

ESLint and Prettier indent clashing with multi-line class definition

I've got a class definition that is too long for a single line. Prettier tries to wrap it but when it does it adds an indentation, which I think is correct. But ESLint doesn't like this so it throws an indent error.
There seems to be no config in ESLint to change this behaviour.
Prettier output:
// ESLint throws an error
export default class FormFieldTemplateCheckboxList
implements ClassComponent<FormFieldTemplateCheckboxListProps> {}
ESLint output:
// Prettier formats to the above on save
export default class FormFieldTemplateCheckboxList
implements ClassComponent<FormFieldTemplateCheckboxListProps> {}
It's a loop of ESLint and Prettier clashing with what they think is correct.
Partial Fix
This fix requires the eslint-config-prettier plugin, and removing indent from the eslint rules.
My old .eslintrc.json included the following;
"rules": {
"indent": ["error", "tab", { "SwitchCase": 1 }]
}
Now prettier controls the indentation. Now there is no error being thrown, which is what I want to occur.

I haven't found a solution that keeps the indent rules in eslint, but what I've found in my opinion is better.
Remove the indent rule from .eslintrc.json
"rules": {
// "indent": ["error", "tab", { "SwitchCase": 1 }]
// ...
}
This will now not show any errors with indents. To fix this I installed eslint-plugin-prettier.
Put prettier in the plugins list, and then add prettier/prettier in the rules and set it to either error or warn.
This will show an error or warning based on any prettier issues, including indent.
"plugins": [
"prettier"
// ...
],
"rules": {
"prettier/prettier": "error",
// ...
}
I'm not sure if there's a way to change the severity based on the prettier rule.

Vue component script indent rules conflicting

I'm trying to set some ESLint rules to my new Vue project extending both eslint-plugin-vue and airbnb. I could set up everything just fine, except for the tag inside Vue components.
The accepted default would be like:
<script>
export default {
name: 'Login',
};
</script>
However I'm trying to get this code style to be accepted:
<script>
export default {
name: 'Login',
};
</script>
Using the rule vue/script-indent ( https://eslint.vuejs.org/rules/script-indent.html ) I could get the job done with the baseIndent set to 1. However, the lint rule is still complaining about it.
I tried placing this in this .eslintrc.json file:
"overrides": [
{
"files": [",*.vue"],
"rules": {
"indent": "off"
}
}
]
Also tried using the ignoredNodes from indent rules ( https://eslint.org/docs/rules/indent ) however I think I couldn't get my AST selectors right.
This is my current .eslintrc.json file:
{
"extends": [
"plugin:vue/recommended",
"#vue/airbnb"
],
"rules": {
"indent": [2, 4],
"vue/html-indent": [2, 4],
"vue/script-indent": [2, 4, {
"baseIndent": 1
}],
"vue/singleline-html-element-content-newline": 0,
"vue/eqeqeq": 2
},
"plugins": [
"html"
]
}
I get these errors when running lint:
8:1 error Expected indentation of 0 spaces but found 4 indent
9:1 error Expected indentation of 4 spaces but found 8 indent
10:1 error Expected indentation of 0 spaces but found 4 indent

If you're using VSCode, this setting will probably help you out:
// settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
// ...
}
At the time I saved the file before this setting, it linted with rules that wasn't defined by me even though I've written them on .eslintrc.js.
This setting made it work just fine.
But also check out the conflicts between eslint-plugin-html and eslint-plugin-vue.

ReactJS eslinting throwing errors on lines that don't exist

I'm quite new to react and webpack but have used eslint and javascript for years but this is really driving me insane.
I've created my project and have a actions.js file in my redux folder and in that file all I currently have is
export default UPDATE_IS_LOGGED_IN = 'UPDATE_IS_LOGGED_IN';
I've installed airbnb eslinter and setup the webpack task like so
{
test: /\.js$/,
exclude: ['/node_modules/'],
use: ['eslint-loader', 'babel-loader']
}
and in my .eslintrc file I have
{
"parser": "babel-eslint",
"rules": {
"comma-dangle" : 0,
"no-undef": "off",
"max-len": [1, 120, 2, {"ignoreComments": true}],
"no-compare-neg-zero": "error",
"no-unused-vars": "off",
"class-methods-use-this": ["error", {
"exceptMethods": [
"render",
"getInitialState",
"getDefaultProps",
"componentWillMount",
"componentDidMount",
"componentWillReceiveProps",
"shouldComponentUpdate",
"componentWillUpdate",
"componentDidUpdate",
"componentWillUnmount"
]
}]
},
"extends": ["airbnb-base"]
}
But when I run webpack I get the following eslinting errors for the action.js file.
1:1 error 'use strict' is unnecessary inside of modules strict
3:32 error Strings must use singlequote quotes
6:19 error Unexpected chained assignment no-multi-assign
6:63 error Newline required at end of file but not found eol-last
This isn't the only file its happening on its nearly every js file in my project.

I'm guessing it is linting the files that webpack has already built. Try adding your build file to excludes.

JSX not allowed in files with extension ' .js' with eslint-config-airbnb

I've installed eslint-config-airbnb that is supposed to pre configure ESLINT for React:
Our default export contains all of our ESLint rules, including
ECMAScript 6+ and React. It requires eslint, eslint-plugin-import,
eslint-plugin-react, and eslint-plugin-jsx-a11y.
My .eslintrc extending its configuration:
{ "extends": "eslint-config-airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true
},
"rules": {
"new-cap": [2, { "capIsNewExceptions": ["List", "Map", "Set"] }],
"react/no-multi-comp": 0,
"import/default": 0,
"import/no-duplicates": 0,
"import/named": 0,
"import/namespace": 0,
"import/no-unresolved": 0,
"import/no-named-as-default": 2,
"comma-dangle": 0, // not sure why airbnb turned this on. gross!
"indent": [2, 2, {"SwitchCase": 1}],
"no-console": 0,
"no-alert": 0,
"linebreak-style": 0
},
"plugins": [
"react", "import"
],
"settings": {
"import/parser": "babel-eslint",
"import/resolve": {
"moduleDirectory": ["node_modules", "src"]
}
},
"globals": {
"__DEVELOPMENT__": true,
"__CLIENT__": true,
"__SERVER__": true,
"__DISABLE_SSR__": true,
"__DEVTOOLS__": true,
"socket": true,
"webpackIsomorphicTools": true
}
}
Unfortunatelly I'm getting the following error when linting a .js file with React JSX code inside it:
error JSX not allowed in files with extension '.js' react/jsx-filename-extension
Wasn't eslint-config-airbnb configured react to support JSX already, as stated ?
What should be done to remove that error ?

Either change your file extensions to .jsx as mentioned or disable the jsx-filename-extension rule. You can add the following to your config to allow .js extensions for JSX.
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

It's work for me. hope to help you.
disable jsx-filename-extension in .eslintrc:
"rules": {
"react/jsx-filename-extension": [0]
}
in webpack.config.js:
resolve: {
extensions: ['.js', '.jsx']
},

Call me a dummy if it does not work for you
"rules": {
"react/jsx-filename-extension": [0],
"import/extensions": "off"
}

If you don't want to change your file extension, you can export a function that returns jsx, and then import and call that function in your js file.
// greeter.jsx
import React from 'react';
export default name => (
<div>
{`Hello, ${name}!`}
</div>
);
and then
// index.js
import ReactDOM from 'react-dom';
import greeter from './components/greeter';
const main = document.getElementsByTagName('main')[0];
ReactDOM.render(greeter('World'), main);

Following React documentation:
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).
Following Airbnb's style guide:
Do not use React.createElement unless you’re initializing the app from a file that is not JSX.
You could do this:
//index.js
const app = React.createElement(App);
ReactDOM.render(app, document.getElementById('root'));

To expound on Martin's answer, it seems that it is not possible, currently, to use JSX in React Native. A PR was created but reverted due to concerns about fragmentation and unknown consequences of having things like index.ios.jsx. I'm not sure how AirBnb works around this or if they do, but I have used basically the same rules block as Martin.

For future readers who want to write jsx in .js files:
Install npm i react react-dom even if you think you're not writing react.
Install npm i -D #babel/preset-react
In babel config: plugins: ['#babel/plugin-transform-react-jsx']
you should setup module.rules for /\.jsx?$/ files with babel-loader (so you will need to install npm i -D babel-loader too)

ESLint > Auto-beautify and space-indentation

I just realized that there is something better than JSLint and I am having a bit of a hassle with it. I am referring to ESLint.
I am setting it up for VS Code, with the official Plugin by Dirk Baeumer.
So far, everything is running great, until I ran into the indent setting.
I am using a customized auto-beautify setting for my editor and it defaults to 4 spaces/tabs indentation on save.
I am getting 2 errors from ESLint due to integrated code convention types:
[ESLint] Expected indentaion of 2 spaces but found 4. (indent)
and also, for some other case scenarios, I get the following:
[ESLint] Expected indendation of 6 spaces but found 8. (indent)
and so on.. 10 but 12 , 12 but 14... you get the point.
How can I default ALL the indentations troughout my document to be 4 spaces?
My current .eslintrc settings:
{
"extends": [
"eslint:recommended"
],
"root": true,
"rules": {
// '===' instead of '==' rule
"eqeqeq": [2, "allow-null"],
// ^^^ '===' instead of '==' rule
"indent": [2, 4],
"quotes": [2, "single"],
"semi": [2, "always"],
"no-console": 0
},
"env": {
"es6": false,
"browser": true,
"commonjs": true,
"node": false,
"jquery": true
}
}
My "indent": [2, 4], is not working the way I expect it to.
Sample code for reference:
window.setTimeout(function () {
'use strict';
$(document).ready(function () {
var current_width = $(window).width();
if (current_width <= 481) {
$('.widget-form-list').addClass('supv');
$('.widget-form-item').addClass('supv-form-item');
}
})
// window resize
$(window).resize(function () {
var current_width = $(window).width()
if (current_width < 481) {
$('.widget-form-list').addClass('supv')
$('.widget-form-item').addClass('supv-form-item')
}
})
}, 1000)

ESLint configurations are cascading. Meaning that you can have multiple .eslintrc files in different subdirectories and they will be merged at lint time. Your configuration for indent rule looks correct, but based on the error messages you are getting, chances are - it's being overridden by something that sets default number of indentation spaces to 2.
To figure out what is going on, you can use two different commands in ESLint. First, you can run (from command line) ESLint with print-config option. It requires a file to lint, and it will output computed configuration that ESLint will use for this file. Verify that indent is set to [2, 4] in that configuration. If it's not, you can run ESLint with debug flag, which should print out locations of all config files that are being used. That should show you which file overrides your default configuration.

Problem fixed.
The issue was that while configuring the .eslintrc file using the terminal it somehow created another .eslintrc file within my */js/ directory by itself, which contains some default settings which override my */root/ file.
If you are experiencing the same issue - search for a second .eslintrc file within your project folder.