I am having the following eslintrc.js:
module.exports = {
extends: ['airbnb-typescript/base'],
parserOptions: {
project: './tsconfig.json',
sourceType: 'module',
},
ignorePatterns: ['*.js'],
rules: {
'no-underscore-dangle': 0,
...
}
};
And I'd like to include some exceptions with allow: [ /** */ ]. But each time when I am adding this as a key: value property in my file, ESLint returns me an error with the following text: unable to use allow on top level. So the question is, how to achieve such results, with allow?
Long story short, I am unable to use my set of rules with MongoDB _id naming, so I have ESLint just to ignore only _id in variable naming, instead of disabling the naming-convention rule itself.
Is there any way to solve this problem?
It works for me:
"no-underscore-dangle": ["error", { allow: ["_id"] }]
If you are using the #typescript-eslint/naming-convention rule, you may also need to add this:
"#typescript-eslint/naming-convention": [
"error",
{
selector: ["variable"],
format: ["strictCamelCase", "PascalCase", "UPPER_CASE"],
filter: {
regex: "^_id$",
match: false,
},
},
],
Related
I am using lint staged and husky to verify the commits, however since today it shows me the following error in the precommit logs.
ESLint: 8.30.0
Error: .eslintrc.cjs:
Configuration for rule "indent" is invalid:
Value {"allowIndentationTabs":true} should be equal to one of the allowed values.
Value {"allowIndentationTabs":true} should be integer.
Value {"allowIndentationTabs":true} should match exactly one schema in oneOf.
This is my config in the .eslintrc.cjs file
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:react/recommended',
'standard'
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'react'
],
rules: {
indent: ['error', { allowIndentationTabs: true }]
}
}
I have been trying different solutions but in the end they all give the same error
indent rule doesn't have that option
no-tabs has it but I guess it's not what you wanted
Our project in company uses .js files and eslint is used for formatting. now we are transforming our app slowly to use .ts and .tsx files so I enabled prettier formatting in .ts and .tsx files only but before we use prettier we configured special rules for typescript files in eslint as following :
overrides: [
// Match TypeScript Files
// =================================
{
files: ['**/*.{ts,tsx}'],
// Parser Settings
// =================================
// allow ESLint to understand TypeScript syntax
// https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js#L10
parser: '#typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
},
// Extend Other Configs
// =================================
extends: [
'airbnb',
'plugin:#typescript-eslint/recommended',
'plugin:import/typescript',
],
rules: {
...rules,
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'#typescript-eslint/space-before-blocks': 'error',
'#typescript-eslint/no-unused-vars': 'error',
'#typescript-eslint/explicit-function-return-type': 'error',
'#typescript-eslint/no-unsafe-return': 'warn',
'#typescript-eslint/padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: ['interface', 'type'],
next: '*',
},
],
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
],
'#typescript-eslint/type-annotation-spacing': 'error',
},
and in .prettierrc file I did the following :
{
"semi": true,
"singleQuote": true,
"printWidth": 100,
"arrowParens": "always",
"tabWidth": 2,
"trailingComma": "es5",
"bracketSameLine": false,
"bracketSpacing": true
}
so prettier for example adds semicolon at end of each line while this rule in .eslint
'#typescript-eslint/member-delimiter-style': [
'error',
{
multiline: {
delimiter: 'none',
requireLast: false,
},
singleline: {
delimiter: 'comma',
requireLast: false,
},
},
doesn't require the line to end with semicolon when declaring types and interface and many other rules conflicts also in eslint when adding multilpe empty lines in file it should show error so how I can do that with prettier?
You may need to change your default formatter for vscode to eslint. You can install the eslint extension and prettier Eslint.
If you are on mac this can be achieved by going to:
Code -> Preferences -> Settings -> Search for Default formatter -> change it to Eslint (dbaeumer.vscode-eslint).
You may also need to change your default formatter. You can achieve this by right-clicking in your screen -> Click on format document with.. -> configure default formatter
I’m receiving the following errors when running yarn eslint:
/…/src/a.js
4:1 error Expected indentation of 1 tab but found 2 spaces indent
4:43 error Strings must use singlequote quotes
5:1 error Expected indentation of 2 tabs but found 4 spaces indent
6:1 error Expected indentation of 1 tab but found 2 spaces indent
6:6 error Strings must use singlequote quotes
✖ 5 problems (5 errors, 0 warnings)
5 errors and 0 warnings potentially fixable with the `--fix` option.
This is my .eslintrc.js file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
parserOptions: {
ecmaFeatures: { jsx: true },
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react'],
settings: {
react: { version: 'detect' },
},
rules: {
indent: [
'error',
'tab'
],
'linebreak-style': [
'error',
'unix',
],
quotes: [
'error',
'single'
],
semi: [
'error',
'always'
]
}
};
… and the file in question:
import React from "react";
import { css } from "./a.css";
export function App() {
\treturn (
\t\t<div className={css.App}>
\t\t\tHello.
\t\t</div>
\t);
}
Note: I include \t here to denote tabs as Stack Overflow replaces actual tabs with 4 spaces.
None of the errors reported by eslint are actual errors in the file. All indents are correct, and I only use single quotes. Hell, there isn’t even a line 43 in that file, as eslint is reporting.
What might be happening here?
indent: [
'error',
'tab'
],
quotes: [
'error',
'single'
],
This rule in you eslint tell that you shall not use space but a tab Key for indentation either remove this rule OR on the lines where the INDENT error has occured you shall find space used for indentation remove them and use the Tab key
Also for the Quote Error check you variable for the string values saved using single quote, if you are using vscode then you might need to remove this rule or update the vscode setting and prevent it from updating the single quote to double quote while auto saving
facepalm.
This ended up being a problem with an aspect of the project I didn’t mention. I’m using Rollup to bundle by code, along with the #rollup/plugin-eslint plugin to run eslint when building. I had my plugins in this order:
plugins: [
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
resolve({
browser: true,
}),
eslint({
include: '**/*.js',
throwOnError: true,
}),
styles({
modules: true,
}),
]
I just had to move the eslint() plugin to the front of the array and all was golden.
plugins: [
eslint({
include: '**/*.js',
throwOnError: true,
}),
babel({
babelHelpers: 'bundled',
exclude: 'node_modules/**',
}),
resolve({
browser: true,
}),
styles({
modules: true,
}),
]
There's answered question which in my opinion doesn't actually answers the question, on the difference between extends: [] vs plugins: [] in ESLint.
In my case, i just used extends section:
extends: [
'plugin:#typescript-eslint/recommended',
],
plugins: [],
rules: {
'#typescript-eslint/explicit-function-return-type': [
'error',
{
allowExpressions: true,
},
],
}
As you can see, i just used predefined config from plugin:#typescript-eslint/recommended and also overwritten #typescript-eslint/explicit-function-return-type rule in rules: {} section. But why do we need this PLUGINS section then? If everything works without it? What do i miss?
You have done it correctly.
For your example, there are 2 ways to do add typescript-eslint...
1st way:
{
parser: "#typescript-eslint/parser",
parserOptions: { sourceType: "module" },
plugins: ["#typescript-eslint"],
extends: [],
rules: {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: true
}
]
}
}
2nd way:
{
plugins: [],
extends: ["plugin:#typescript-eslint/recommended"],
rules: {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
allowExpressions: true
}
]
}
}
The difference is...
1st way:
parser, parserOptions and plugins are manually added,
Only #typescript-eslint/explicit-function-return-type is enforced.
2nd way:
plugin:#typescript-eslint/recommended has automatically added parser, parserOptions and plugins.
Recommended typescript rules are added and enforced.
#typescript-eslint/explicit-function-return-type is augmented and enforced.
This is why when you use plugin:#typescript-eslint/recommended, things work normally even if plugins is empty. A well-written plugins/configs allows that to happen.
Working in electron vue-cli project. Trying to upgrade eslint but the default setup has no-use-before-define enabled.
This causes it to catch every use of things like window.process.env.username as an error.
I tried setting my rules as "no-use-before-define": ["error", { "variables": false }], but it didn't help. Adding window as a global also didn't help. Is there a way to fix eslint to be happy with the window variable?
I do like the idea of this feature, so I would like to leave it on if possible. But just turning it off is ok too if that's the best answer.
If it helps, this is my current .eslintrc.js file
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// Don't error on variables that are global, like window, not working.
"no-use-before-define": ["error", { "variables": false }],
'generator-star-spacing': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "any",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
Thanks
-Edit
Tried
globals: {
window: 'writable'
},
But to no effect