I'm trying to use decorators in my JS project, however ESLint is throwing an error stating that the # symbol is a unexpected character.
My code:
#observable items = [];
My .eslintrc:
{
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"env": {
"browser": true,
"node": true,
"es6": false
},
"ecmaFeatures": {
"modules": true
},
"rules": {
"strict": [
2,
"global"
],
"quotes": [
2,
"single"
],
"indent": [
2,
4
],
"eqeqeq": [
2,
"smart"
],
"semi": [
2,
"always"
],
"max-depth": [
2,
4
],
"max-statements": [
2,
15
],
"complexity": [
2,
5
]
}
}
You probably want to use babel-eslint which uses Babel to parse things that ESLint hasn't implemented yet (usually experimental features like this). From their README:
At the moment, you'll need it if you use stuff like class properties, decorators, types.
It is used with your current eslint setup, you just have to update some configuration in your .eslintrc
A quick answer:
Install a lib
npm i -D babel-eslint
Add to your .eslintrc
"parser": "babel-eslint"
If you using Visual Code it will not always work. You need to add into User Settings (or Workspace Settings) following parameter:
{
...
"eslint.options": {
"experimentalDecorators": true
}
...
}
Somehow this option wins anything you put into .eslintrc .
If you using #babel/core, you need to install #babel/eslint-parser.
Add to your .eslintrc
parser: "#babel/eslint-parser"
Using babel-parser might have fixed the '#'s but caused a bunch of other warnings and errors. What I did was put all the files that used the decorator into a store folder, create an .eslintignore file and pointed to that directory.
To fix this you need to choose google as your style guide as follow:
extends: ["google"],
Related
I use ESLint in all of my TypeScript projects with the following settings:
"extends": ["airbnb", "prettier", 'plugin:vue/recommended'],
"plugins": ["prettier"],
"parserOptions": {
"parser": "#typescript-eslint/parser",
"ecmaVersion": 2018,
"sourceType": "module"
},
a bunch of custom rules. I've also installed the following dependencies for TypeScript support:
"#typescript-eslint/eslint-plugin": "^1.7.0",
"#typescript-eslint/parser": "^1.7.0",
However, one of ESLint's most useful rules, https://eslint.org/docs/rules/no-unused-vars, seems to be very poorly configured for TypeScript projects. For example, when I export an enum, the rule warns me that the enum isn't in use in the file where it is declared:
export enum Foo {
Bar,
}
Similarly, when I import an interface or class to be used as a type, 'no-unused-vars' will complain again on the the line of the actual import:
In Foo.ts
export interface Foo {
bar: string;
}
In bar.ts
import { Foo } from './Foo'
const bar: Foo = { bar: 'Hello' };
Is there any way to configure the no-unused-vars rule to take these two cases into account? I'm not a fan of disabling the rule, as it is one of the most helpful rules in my entire ruleset outside of these cases.
I've already downgraded the rule to only give a warning instead of an error, but having all my documents filled with warnings still kind of defeats the purpose of using esLint.
Filling my all my documents with //eslint-disable-line as suggested here also seems like a bad solution.
I think the use of "plugin:#typescript-eslint/eslint-recommended" introduces bunch of unwanted rules. One is probably better off using "#typescript-eslint/no-unused-vars" ESLint rule instead.
{
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint",
],
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
],
"rules": {
"no-unused-vars": "off",
"#typescript-eslint/no-unused-vars": ["error"]
}
}
Note: be sure to restart your server after making the above change.
Reference - https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md
It's a bit buried in the documentation, but if you add some things to the 'extends' property, you can use both the rules recommended by ESLint like no-unused-vars, and have it actually work in Typescript. Like so:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
#typescript-eslint/recommended seems to be the thing that allows eslint:recommended to deal with Typescript constructs effectively. Not sure how it would affect your other extensions though.
I got lot of false errors with latest TypeScript/ES-Lint versions and I found that they came up with an experimental rule to fix the no-unused-vars which is broken and with the experimental rule #typescript-eslint/no-unused-vars-experimental it finally works as I expect it to.
Prior to the change on my side, I had multiple false errors when using interfaces/types saying that these vars were unused (which of course they'll never be used since they're not variables but rather interfaces/types)... and in case you're curious about the code itself, here is the PR adding this experimental rule which is how I found the rule.
Here's a subset of my updated .eslintrc file
{
"parser": "#typescript-eslint/parser",
"extends": [
"plugin:#typescript-eslint/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars": "off",
"#typescript-eslint/no-unused-vars-experimental": "error",
"no-unused-vars": "off"
}
}
and I'm now finally back to normal :)
EDIT (Jan. 2021)
As mentioned by Brad (a maintainer of the project) in the comment below, this is (was) a temporary solution and is now deprecated. From his comment (below), we can now use directly #typescript-eslint/no-unused-vars for the same intended behavior. Thanks to Brad for the info. I can also confirm that switching back to #typescript-eslint/no-unused-vars now works for me (I updated my code and it's all good now).
This is not the way to go, and you should avoid it. #typescript-eslint/no-unused-vars-experimental is deprecated, and will be removed in the next major. Update to the latest version of the tooling and just use #typescript-eslint/no-unused-vars. Source: I am the maintainer of the project.
UPDATED ANSWER since Jan. 2021
So here's the latest update of my .eslintrc file which works for me :)
{
"parser": "#typescript-eslint/parser",
"extends": [
"plugin:#typescript-eslint/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars": "error",
"no-unused-vars": "off"
}
}
My issue was with using decorators and wanting to have a variable with an appropriate name for clarity, for example:
#OneToMany((type) => Employee) instead of #OneToMany(() => Employee)
The usual solution for TypeScript is to prefix with an underscore:
#OneToMany((_type) => Employee)
And it's possible to make ESLint accept the same:
.eslintrc.js
module.exports = {
...
rules: {
'#typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }]
....
},
};
You have parser nested inside of parserOptions. It should be a sibling, like this:
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
As for no-unused-vars, I'm afraid this is an ongoing bug with #typescript-eslint:
https://github.com/typescript-eslint/typescript-eslint/issues/363
Upgrading #typescript-eslint/eslint-plugin and #typescript-eslint/parser from 3.x to the latest 4.x resolved the issue for me.
For anyone looking to get no-unused-vars working properly in TypeScript when using YAML configuration, e.g. .eslintrc.yaml, it looks like this:
rules:
"#typescript-eslint/no-unused-vars":
- warn
- argsIgnorePattern: "^_" # <-- NOTE!
varsIgnorePattern: "^_"
caughtErrorsIgnorePattern: "^_"
no-unused-vars: # disabled but see typescript-eslint/no-unused-vars
- off
...
Also for me works rule /eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }]/
You can add it like this in your .eslintrc.json file (this one is for ignoring all Strings which start with Capital letter)
"rules": {
"no-unused-vars": [
"error",
{
"varsIgnorePattern": "^[A-Z]"
}
],
}
For more information, and properties you can check this link.
After couple of year still getting the same error. It's frustrate to try and check why it's not working. After trying lot of possible configuration here is the finally working for me. Incase someone had difficulties like me !
eslintrc.js
module.exports = {
env: {
browser: true,
node: true,
},
parser: "#typescript-eslint/parser",
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"prettier",
"plugin:prettier/recommended",
"plugin:#typescript-eslint/recommended",
],
parserOptions: {
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
project: "tsconfig.eslint.json",
tsconfigRootDir: __dirname,
sourceType: "module", // Allows for the use of imports
},
plugins: ["#typescript-eslint", "#typescript-eslint/tslint", "import", "unused-imports"],
rules: {
"#typescript-eslint/no-unused-vars": "off",
"#typescript-eslint/no-unused-vars-experimental": "error",
"no-unused-vars": "off",
"import/order": "error",
"no-console": ["warn", { allow: ["warn", "error"] }],
eqeqeq: ["error", "always"],
"no-else-return": "error",
},
settings: {
"import/resolver": {
node: {
extensions: [".js", ".jsx", ".ts", ".tsx"],
moduleDirectory: ["node_modules", "src/"],
},
},
},
};
I use this configuration and it works normally
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"jest": true
},
"extends": ["airbnb-base", "prettier"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "jest"],
"rules": {
"import/extensions": "off",
"#typescript-eslint/no-unused-vars": ["error"]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
I am new in svelte. I trying to add ESLint to my svelte project.
My eslintrc.json:
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"extends": [
"standard", "airbnb-base/legacy"
],
"plugins": [
"svelte3"
],
"overrides": [
{
"files": ["**/*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2019,
"sourceType": "module"
}
}
It works, but linter rules does not support sass syntax. I have this error.
How can I fix it?
If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.
This setting can be given a function that accepts an object of attributes on a tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.
The default is to not ignore any styles.
settings: {
'svelte3/ignore-styles': () => true
}
I faced the same issue and there is no documentation on how to use the svelte3/ignore-styles in settings to ignore the styles in eslint. Here is how i fixed the issue -
I Changed .eslintrc to .eslintrc.js in order to use the ignore rule as a function -
module.exports = {
...
"rules" : {
},
"settings": {
"svelte3/ignore-styles": () => true
}
}
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
I am importing libraries in my vue.js project. For Library1 alone there are no errors. When i run my vue node js project build for library 2 i am importing , it always fails at below line and gets stuck with message 'building for production'.
Could not find implementations for the following rules specified in the configuration:
no-explicit-any
Try upgrading TSLint and/or ensuring that you have all necessary custom rules installed.
If TSLint was recently upgraded, you may have old rules configured which need to be cleaned up.
Is there a way to make this ignore by npm build ?
Below is my .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'#vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
legacyDecorators: true,
},
},
rules: {
'#typescript-eslint/no-var-requires': 0,
'#typescript-eslint/ban-ts-ignore': 'off',
"#typescript-eslint/no-explicit-any": "off",
}
}
Do i need to update my tsconfig or tslint to stop checking for this when building production. This happens to only my vue library projecting i am using.
I use npm link and npm link to link and install libraries.
Well the easiest way to fix it is by removing tslint. As you Already have eslint. You just have have to install some extra eslint packages
npm i -D #typescript-eslint/eslint-plugin;
npm i -D #typescript-eslint/parser;
npm i -D eslint;
The following is the recommended
module.exports = {
env: {
commonjs: true,
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking",
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parser: "#typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
ecmaVersion: 2019,
},
plugins: ["#typescript-eslint"],
rules: {
.....
}
}
NOTE:
on your tsconfig.json
Add the include section. This as the name says includes the paths of your source files. And exclude does the opposite
{
"compilerOptions": {
....
},
"exclude": [
"/node_modules/",
"./config/"
],
"include": [
"./src/*.ts",
"./src/**/*.ts",
"./src/**/**/*.ts",
"./src/**/**/**/*.ts"
]
}
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)