I've got two variables in my webpack config which are required but are throwing linting errors.
Is there a way add exceptions for a specific variable?
I want to ignore path and persistentPlugins
current .eslintrc file looks as follows:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"browser": true,
"node": true
},
"globals": {
"React": false,
"react": false,
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"no-console": 0,
"no-underscore-dangle": 1,
"quotes": [2, "single"],
"react/no-danger": "off",
}
}
Assuming that it's the no-undef rule that's raising the error, specify them as globals:
...
"globals": {
"path": true,
"persistentPlugins": true,
"React": false,
"react": false,
},
...
Alternatively, you could disable the error inline in the webpack config:
/*global path, persistentPlugins*/
For other errors, there is a question here on disabling them inline.
Related
So I'm using eslint and prettier on a TS express app. I want to set tab width to 4, but it seems the base eslint and the typescript eslint are in conflict.
This is what it gives me for the same line:
This is my eslintrc.json:
{
"env": {
"browser": true,
"commonjs": true,
"es2021": true
},
"extends": "standard-with-typescript",
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"project": "tsconfig.json"
},
"rules": {
"indent": ["error", 4],
"prettier/prettier": ["error", { "endOfLine": "auto" }]
},
"parser": "#typescript-eslint/parser",
"plugins": ["prettier"]
}
This is my prettierrc.json:
{
"singleQuote": true,
"arrowParens": "always",
"printWidth": 120,
"semi": false,
"tabWidth": 4
}
Any idea how to resolve it so I can just have 4 spaces to a tab?
If you're using prettier and eslint, you should use the prettier eslint configuration. It will disable every style-only eslint rule. It should be ok, since styles would be left for prettier to format. See the docs for more info on this.
Since you have the prettier plugin installed, you can change your extends line to this and it should be enough:
"extends": ["standard-with-typescript", "plugin:prettier/recommended"]
How can I remove the semicolon rule?
I've tried to remove the semi rules, but I'm not succeeding. When I save the file once it removes the semicolons and lint complains that it's missing, and when I insert it it complains again saying to remove.
I would like to keep the semicolon
Thats my .prettierrc file:
{
"printWidth": 100,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"endOfLine":"auto",
"semi": true
}
and thats my .eslintrc file
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"airbnb",
"plugin:prettier/recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": ["prettier", "react", "react-hooks"],
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
],
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/jsx-indent-props": [2, 4],
"react/jsx-indent": [2, 4],
"react/jsx-one-expression-per-line": [0],
"react/prefer-stateless-function": [1],
"react/static-property-placement": [1, "property assignment"],
"react/prop-types": "off"
}
}
I got rid of the same error by setting the prettier rules configuration in .eslintrc to:
"rules": {
"prettier/prettier": [
"error",
{
"endOfLine": "off"
}
],
while keeping in .prettierrc:
"endOfLine": "auto"
NOTE: This is just an intent to workaround the error you (and I) got, but the effect I see is that the "endOfLine" rule will work when using the pretty formatted but not when running eslint.
Within the rules section, override prettier configuration like so:
"rules": {
"prettier/prettier": ["error", { "semi": false }],
}
This will disallow the use of a semicolon where it's not required, as per the prettier rules.
I was playing around with my extensions and settings a while ago and have been struggling to get my linter to show the old warnings and errors it had. At the moment, I'm not getting any highlighting for undeclared variables. Would anyone mind talking me through how to figure this out, as I've hit a wall.
I have the eslint extension installed. I've also installed eslint with npm install... and have a .eslintrc.json file with the following settings:
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended","eslint:recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"ecmaVersion": 11,
"sourceType": "module",
"allowImportExportEverywhere": true
},
"plugins": ["react"],
"rules": {
"react/prop-types": 1,
"react/no-unescaped-entities": 0
},
"settings": {
"react": {
"version": "detect"
}
}}
I have a settings.json file with the following:
{...
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"diffEditor.renderSideBySide": false,
"prettier.printWidth": 130,
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"files.associations": {
"*.js": "javascriptreact"
}
...}
I want to have an ability to use 2 blank lines in some parts of my code.
Prettier default behaviour allows to have 1 blank line maximum.
I've tried to use "no-multiple-empty-lines": [2, {"max": 2 }] but it doesn't work at all and prettier still complains.
This is my .eslintrc config file. If you need any other information please let me know.
{
"env": {
"node": true,
"browser": true,
"es6": true,
"commonjs": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
],
"rules": {
"prettier/prettier": "error",
"no-multiple-empty-lines": [2, {"max": 2 }],
"react/jsx-uses-vars": [2],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
},
"plugins": [
"prettier",
"react"
],
"settings": {
"react": {
"version": "detect" // React version. "detect" automatically picks the version you have installed.
}
}
}
This might not work in your case -- I'm just running eslint without prettier -- but try this line instead:
"no-multiple-empty-lines": ["error", { "max": 2, "maxBOF": 0, "maxEOF": 0 }]
If you definitely want to run it through prettier with eslint though, it looks like that might not work at all. Not sure I'm reading this issue correctly, but it seems like that might not be configurable in prettier? If all you want is to change eslint's behavior though, I think the above line should work because I just had to use it in my own config.
So I am using aliases in my webpack configuration and I have those eslint warnings about no-extraneous-dependencies etc.
So I installed eslint-plugin-import along with eslint-import-resolver-alias and configured my .eslintrc files like this:
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"defaultParams": true
}
},
"rules": {
"react/jsx-filename-extension": 0,
"react/sort-comp": 0,
"linebreak-style": 0,
"prefer-arrow-callback": 0,
"consistent-return": 0,
"func-names": 0,
},
"settings": {
"import/resolver": {
"alias": [
// I have my actions folder in ./shared/actions
["Actions", "./shared/actions"]
]
}
}
}
My linter is not working with this settings options. What am I missing?
The problem has to be with your relative path
"./shared/actions"
Try changing it to
"../shared/actions"
If that does not work, try an absolute path and take it from there.
Basically, the root directory / current working directory, is not the one you think it is...