I came across this style guide and trying to adopt some of its rules.
The first rule mentioned about
Only include one React component per file. However, multiple
Stateless, or Pure, Components are allowed per file. eslint:
react/no-multi-comp.
So in my .eslintrc
{
"parser": "babel-eslint",
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-set-state": "off"
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"globals": {
"localStorage": true,
"fetch": true
},
"settings": {
"react": {
"pragma": "React",
"version": "16.4.1"
}
}
}
I added this to rules
"rules": {
"no-set-state": "off",
"react/no-multi-comp": [true, { "ignoreStateless": true }]
},
Am I doing this correctly? Because when i read the docs, I saw a <enabled> I have no idea what that means.
<enabled> looks for value one of the 0,1,2 or one of the off,warn,error meaning:
From the docs:
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code is 1 when
triggered)
Using Visual Studio Code, and installing the ESLint plugin, you should be able to look under Output > ESLint
That the <enabled> is looking for 0, 1, or 2.
Change accordingly.
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"]
}
}
}
}
we have React project with Typescript.
We use TSDoc to standardize the doc comments used in TypeScript code
Our eslint.trc file as follow:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"google",
"plugin:#typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint/eslint-plugin",
"eslint-plugin-tsdoc"
],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"tsdoc/syntax": "warn",
"valid-jsdoc" : 0,
"#typescript-eslint/explicit-module-boundary-types": "off"
}
}
How to configure this configuration file, for not asking ESLINT about documenting standard react methods, like constructor(),static getDerivedStateFromProps(),render(),componentDidMount() and etc.
We can switch "require-jsdoc":"off", but it also will not ask out user defined methods in class.
I've resolved this problem with this plugin
https://www.npmjs.com/package/eslint-plugin-require-jsdoc-except?activeTab=readme
You can add your function names at ignore:
"ignore":[
"constructor", "render","componentDidUpdate","getDerivedStateFromProps","componentDidMount"
]
Add this to your .eslintrc.js rules:
rules: {
'require-jsdoc': [
'error',
{
require: {
FunctionDeclaration: false,
MethodDefinition: false,
ClassDeclaration: false,
ArrowFunctionExpression: false,
FunctionExpression: false,
},
},
],
},
Read more:
https://eslint.org/docs/latest/rules/require-jsdoc
hy, i have problems with with reactjs and react-native pages in vscode.
example = "expected indentation of 10 spaces but found 20".
i installed eslint and prettier and it's didnt
that's my .eslintrc:
{
"env": {
"browser": true,
"es2020": true,
"node": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 11,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"rules": {
"indent": [2, "tab", { "SwitchCase": 1, "VariableDeclarator": 1 }],
"no-tabs": 0,
"react/prop-types": 0,
"react/jsx-indent": [2, "tab"],
"react/jsx-indent-props": [2, "tab"],
}
}
but i think there is a problem in my setting.json
how can i fix it?
Go to "Files" > "Preferences" > "Settings" then search "indent".
Search for "tab size" and make it 4.
Search for "auto indent" and select "full".
I hope this will work for you.
To solve the problem, look at the bottom right side of Vscode and make sure you have Javascript as defined language for the current project or tab. If not, click on what you have there and match it the right programming language to .js file extension. I hope that could help someone.
look at the bottom right of your vscode
Edit: This is an ESlint problem. I've included my ESLint setup at the end of this post.
I'm fairly new to TypeScript -- I have been refactoring someone else's React code, moving it to TypeScript for a work project when I ran into this line
const memoryOptionsResponse = window.webchatMethods.getMemory(chatId);
TypeScript complains about 'window.webchat', saying
Property 'X' does not exist on 'Window & typeof globalThis
After some googling, the answer would seem to be to put this at the root level of the module
declare global {
interface Window {
webchatMethods:any;
}
}
However now TS complains with the following error.
This Stack Overflow page suggests something similar, but again it has declare global and ESLint balks.
After half an hour trying to fix this, I've decided to turn to you for advice -- if anyone knows a good solution, I'd appreciate it!
// .eslintconfig
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"extends": [
"eslint:recommended",
"prettier",
"plugin:react/recommended"
],
"plugins": [
"prettier",
"react",
"react-hooks"
],
"env": {
"es6": true,
"node": true,
"mocha": true,
"browser": true
},
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/prop-types": 1,
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/no-unescaped-entities": "warn",
"react/no-find-dom-node": 0,
"comma-dangle": ["error", "never"],
"global-require": 0
}
}
// .eslintignore
test
node_modules
It looks like what's missing is the piece that tells babel how to deal with typescript. I would check out typescript-eslint.
I am trying to set an eslint rule for methods in class that are never used. Like in the following react component I have a method unUsedMethod which is never used, but eslint does not show an error for it.
class Sample extends Component {
unUsedMethod() {
console.log('I am never used');
}
render() {
return 'Hello!';
}
}
My eslint file looks like this
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [2, 4, {"SwitchCase": 1, "ObjectExpression": "first"}],
"linebreak-style": [
"error",
"unix"
],
"semi": [
"error",
"always"
],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
This plugin does what you are asking for. However a word of caution.
https://www.npmjs.com/package/eslint-plugin-no-unused-react-component-methods
Currently it is impossible to simply have a parser that would check for unused component properties, because component properties can be called dynamically.
For example:
class Sample extends Component {
// Plugin falsely flags this as unused.
unUsedMethod() {
console.log('I am used dynamically');
}
render() {
// No way to parse dynamic function calls reliably
this['unUsedMethod']();
return 'Hello!';
}
}
It also wouldn't work with react-onclickoutside package, as it requires a function to be attached to the component, that is called by wrapping the component in a HOC. https://www.npmjs.com/package/react-onclickoutside
Still the plugin helped me find a few unused functions, so it is worth a try in my opinion.
First install the package: npm i eslint-plugin-no-unused-react-component-methods --save-dev
Add "no-unused-react-component-methods" to your eslint configuration in the plugins section:
{
"plugins": [
"no-unused-react-component-methods"
],
}
And add into the rules section
{
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
}
}
So your config would look like:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react",
"no-unused-react-component-methods"
],
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
"indent": [2, 4, { "SwitchCase": 1, "ObjectExpression": "first" }],
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
Now it should highlight any seemingly unused functions! Let me know if it works or not.