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"
}
...}
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"]
THIS is my problems
Eslint cannot find the file's location?
This is the error!
Thank You in advance for the help!
I was having this problem!
Eslint cannot find the file's location because the path of the file is not fully defined, we must specify them in the configuration file.
The reference exists and it works, the problem is that eslint cannot find it. I fix it as follows!
Unable to resolve the module path './Board'. note that Board does not have an extension, that's the problem! We just need to specify eslint how to resolve the extensions and voila.
I assume eslint installed and has problems integrating express node and react js projects
You can use the automatic configuration of eslint follow the steps and when it is installed configure your .eslint.json file add the description of settings
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
.eslintrc.json the full file look like:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": ["plugin:import/recommended", "plugin:react/recommended", "standard"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"semi": [2, "always"],
"comma-dangle": [
"error",
{
"arrays": "only-multiline",
"objects": "only-multiline",
"imports": "only-multiline",
"exports": "only-multiline",
"functions": "only-multiline"
}
],
"space-before-function-paren": 0,
"spaced-comment": [
"error",
"never",
{
"line": {
"markers": ["/"],
"exceptions": ["-", "+"]
},
"block": {
"markers": ["!", "-", "+"],
"exceptions": ["*"],
"balanced": true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"],
"moduleDirectory": ["node_modules", "src/"]
}
}
}
}
https://eslint.org/docs/user-guide/getting-started
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...
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.