Develop Reference

Eslint extension on vscode gives error "Parsing error: Cannot find module '#babel/preset-react'"

Hi i have a project that uses Eslint and i and my team members installed the vscode extension Eslint.
for some of us the extension works fine while for me and others we get the error "Parsing error: Cannot find module '#babel/preset-react'"
We dont have #babel/preset-react or #babel/core installed as dev dependencies and we like to not install in locally into the project (installing those were recommended on the answers i found)
We tried to install them globally but it also didn’t work, I imagine there is problem with eslint maybe something that needed to be downloaded but we dont know.
I would like to be able to solve it without installing packages into to the project itself or changing the eslintrc file
structure of the project:
project
- client folder
- package.json (client)
- eslintrc file
- server folder
- package.json (server)
- server.js
our eslintrc file
{
"extends": "airbnb",
"parser": "#babel/eslint-parser",
"root": true,
"env": {
"browser": true
},
"parserOptions": {
"requireConfigFile": false,
"babelOptions": {
"presets": ["#babel/preset-react"]
}
},
"rules": {
"semi": ["error", "never"],
"max-len": [2, 120, 2, { "ignoreComments": true }],
"no-nested-ternary": 0,
"no-confusing-arrow": 0,
"arrow-parens": [2, "as-needed", { "requireForBlockBody": true }],
"no-mixed-operators": 0,
"react/jsx-props-no-spreading": 0,
"react/no-this-in-sfc": 0
}
}

How to instruct ESLint to ignore a ruleset in a project?

In my VSCode (Win 10) I have installed the VSCode extension ESLint. On my computer is a Node project, with a JS file inside. If I open this JS file in VSCode, ESLint reports infractions from several different rule sets, including Prettier (screenshot). For this project only, how can I instruct ESLint to not check any of the rules in the Prettier rule set?
FYI when I open VSCode, here is a list of the extensions installed.
The .eslintrc.json file for this project contains the following:
{
"extends": [
"plugin:#wordpress/eslint-plugin/recommended"
],
"env": {
"browser": true,
"jquery": true
}
}
Note: The plugin #wordpress/eslint-plugin/recommended is a separate plugin I have added to this project, and it has rules that I want ESLint to list and report.

Inside eslintrc.js, you can omit/edit the rules you do not like, as such:
module.exports = {
extends: 'airbnb-base',
rules: {
'no-console': 'off',
'no-restricted-syntax': 'off',
'linebreak-style': 0,
'guard-for-in': 'off',
'max-len': ['error', { code: 160 }],
},
};

You can override such rules inside .eslintrc.json according to
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}

There are a few ways you can ignore rules from ESLint
Manually specify each rule in .eslintrc file as off
{
"extends": [
...
],
...
"rules": {
"<rule1>": "off",
...
}
}
Ignore files or folder from eslint rules i.e. add ignorePatterns
{
"ignorePatterns": ["temp.js", "**/vendor/*.js"],
"rules": {
//...
}
}
Create .eslintignore file and exclude the files or folder from being linted by ESLint. ESLint Ignore

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)

Define WebSocket as a global in ES Lint for a React Native app

I get the following eslint error:
42:21 error 'WebSocket' is not defined no-undef
You cannot import WebSocket from react-native because it's a global, but when I add WebSocket as globals to my .eslintrc.yml it doesn't change the outcome of the error:
globals:
WebSocket: true
How do I define WebSocket as a global in ES Lint for a React Native app?
Can this be fixed? Currently my .eslintrc looks like this:
env:
browser: false
es6: true
commonjs: true
node: true
extends: 'airbnb'
parser: babel-eslint
globals:
WebSocket: true
parserOptions:
ecmaFeatures:
experimentalObjectRestSpread: true
jsx: true
sourceType: module
plugins:
- react
- react-native
rules:
indent:
- error
- tab
- {"SwitchCase": 1}
linebreak-style:
- error
- unix
quotes:
- error
- double
semi:
- error
- never
no-tabs: off
max-len: off
no-console: off
no-plusplus: off
global-require: off
import/no-unresolved: off
import/extensions: off
class-methods-use-this: off
react/jsx-no-bind: off
react/forbid-prop-types: off
react/prefer-stateless-function: off
react/jsx-indent: [2, 'tab']
react/jsx-indent-props: [2, 'tab']
react/jsx-filename-extension: [1, { extensions: ['.js', '.jsx'] }]
react/jsx-uses-react: error
react/jsx-uses-vars: error
react-native/no-unused-styles: 2
react-native/split-platform-components: 2
react-native/no-inline-styles: off
react-native/no-color-literals: off
I can get rid of it using the inline comment
/* globals WebSocket:true */
Also when I don't inherit from the airbnb eslint, but I can't figure out which lint rule in Airbnb is responsible for blocking this.

Based on the information you provided, it looks like your config file is not being picked up for some reason. Configuration for globals looks correct and should work. In order to figure out what is going on, you should do two things. First you can run eslint --print-config path_to_some_js_file to see how your config looks like after ESLint resolves all dependencies and cascading. Most likely that config will not have globals declared. After that, you can run eslint --debug path_to_file to see all config files that are being used by ESLint. If your file is not being included, check all other config files and verify that they don't have root: true in them (which would prevent ESLint from merging configs in parent directories). For more information about CLI flags you can look at ESLint documentation

ESlint "Expected indentation of 1 tab character but found 0" error

I am getting aמ indentation error that I am having a hard time reasoning. Would really appreciate some help. Here's the stripped down Header.js file where ESlint thinks something is amiss:
import React from 'react';
function Header() {
return <p>Test</p>;
}
module.exports = Header;
ESlint throws an error
4:3 error Expected indentation of 1 tab character but found 0 indent
my .eslintrc file is as follows:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"node": true
},
"extends": "airbnb",
"rules": {
"arrow-body-style": [0],
"comma-dangle": 0,
"indent": [2, "tab", {"SwitchCase": 1}],
"no-console": 0,
"react/prop-types": 0,
"react/jsx-indent-props": [2, "tab"]
}
}
ESLint version is 2.11.1
I am definitely missing something to get this error. But can't figure out what. I have looked into ESlint documentation; but my usage seems correct. I have checked the tab spacing on line 4 too.
Update 1:
The error disappeared when I typed out the same code in vim. I think the error has to do with some sublime settings/plugins that I installed recently.
Update 2:
Figured out the problem.
My sublime settings mentioned
"tab_size": 4,
That is incompatible with my .eslintrc file. I changed the settings to
"tab_size": 2,
and the issue was resolved.
Thanks a lot for all of you who commented