There seem to be two linting rules in the electron-react-boilerplate project that are in conflict with each other.
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setSvg(e.target.value)
}
// react/jsx-curly-newline-problem
Fixing that causes
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
setSvg(e.target.value)}
// eslint (prettier/prettier) problem
I have tried modifying the /configs/.eslintrc file but it has no effect. At least not on the linter running in VSCode nor the linter running as a pre-commit hook.
{
"rules": {
"no-console": "off",
"global-require": "off",
"import/no-dynamic-require": "off",
"jsx-curly-newline-problem": "off" // added
}
}
So, how can I turn off any of these off? To be able to work in VS Code without errors and to be able to commit without using the --no-verify flag.
Related
Description
I am trying to configure esLint to work with Prettier in VSCode. I am able to successfully install esLint, but when I add Prettier and add it to extends in the esLint config, the squiggly lines provided by esLint disappear. I have provided more details below.
Setup Steps
1. Install esLint and VSCode extension
I installed the esLint VSCode extension, and followed the esLint getting started docs to enable esLint. It works exactly as expected. In this example test code,
console.log("This is a test")
it identifies three issues which is the desired result:
2. Install Prettier and VSCode extension
Next, I installed Prettier and the VSCode extension without any difficulty. In this part of the Prettier Docs, it says I will need to install eslint-config-prettier.
3. Install eslint-config-prettier
This is where the issue occurs. The installation goes fine, but in the eslint-config-prettier github page it says:
Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
The moment I add this to my .eslintrc.json and save the config, the squiggly lines disappear:
I am not sure how to resolve this. I went through the docs for esLint, Prettier, and eslint-config-prettier but none of the optional settings listed in the docs are bringing back the squiggles.
Configurations
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"airbnb-base",
"prettier"
],
"overrides": [],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"rules": {}
}
.prettierrc.json
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
esLint Output
[Info - 1:48:20 PM] ESLint server is starting
[Info - 1:48:20 PM] ESLint server running in node v16.14.2
[Info - 1:48:20 PM] ESLint server is running.
[Info - 1:48:21 PM] ESLint library loaded from: /Users/georgeciesinski/Documents/Repositories/todo-list/node_modules/eslint/lib/api.js
Additional Info
My desired behaviour is for esLint to provide the squiggly lines so I can fix the issues manually. At the end, I will run Prettier from the CLI.
I am also using the airbnb eslint config.
I am using an M1 macbook running MacOS Ventura in case this matters.
I was able to find an answer to my query. In short, the configuration works despite my console.log test appearing to fail. The eslint-config-prettier configuration turns off some esLint rules as expected. Per the github docs:
Extending "prettier" turns off a bunch of core ESLint rules, as well as a few rules from these plugins:
#typescript-eslint/eslint-plugin
#babel/eslint-plugin
eslint-plugin-babel
eslint-plugin-flowtype
eslint-plugin-react
eslint-plugin-standard
eslint-plugin-unicorn
eslint-plugin-vue
I was aware of this, but I did not realize that the single quotes and semicolon rules were included in this, both of which stopped working when I extended Prettier. Further testing proved that esLint is in fact linting code that doesn't adhere to the remaining airbnb-base rules which have not been disabled by eslint-config-prettier.
I have a Next.js project that is configured to use Prettier & ESLint. I want to enable the Prettier rule "trailingComma" by setting its value to "all", such that the .prettierrc file contains the following:
// ".prettierrc"
{
"trailingComma": "all"
}
I am using an .eslintrc.json file to configure ESLint, and I have it configured to apply a couple of plug-ins, and to extend a couple of the plug-in's rule-sets.
This is an image of my file:
{
"next",
"next/core-web-vitals",
"prettier",
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended",
"plugin:typescript-eslint/recommended",
}
The following ESLint rule is the rule ESLint uses to configure commas:
"comma-dangle": "off",
This rule is shown to affect the trailingComma rule, as it is mentioned in the error message:
"prettier/prettier": ["error", {}, { "usePrettierrc": true }],
Prettier seems to execute when I save, and the commas are added to the end of the list, but then I get the following error message (shown in the image).
I tried adding the "endOfLine" option both to .prettierrc and .eslintrc.json rule "prettier/prettier", someone said that it would fix the issue, but it didn't fix it.
How can I keep the trailing commas from displaying errors in the editor?
I'm using eslint, and in my configuration file I have "no-console": "off".
I want to turn it on for my CI system, so I've been using the command line (vue cli syntax):
vue-cli-service lint --rule '"no-console": "error"'
This doesn't work.
However, if I invert things (set error in the configuration, and pass off as a flag) it does work.
Anyone know why?
EDIT: it should probably look like vue-cli-service --rule 'no-console: 2'
PS: "error" may be working too I guess.
You can make a config in a lot of places but the usual one is probably .eslintrc.js in which you can write
module.exports = {
[...]
// add your custom rules here
rules: {
"no-console": "off",
},
}
As shown here: https://eslint.org/docs/rules/no-console
This one should work but it always depend on how your project is setup too.
After migrating from VueCLI to Vite, I have to do the linting "manually" as far as I understand; correct me if I'm wrong.
As I only want to lint my .ts and .html files (I separate them even for components), I have this script in my package json:
"lint": "eslint --ext .ts --ext .html src/"
It found some issues like missing :key in loops, but it also shows me this error for each template:
error clear vue/comment-directive
And this is always the closing tag of any root elements within my template.html
If there is only one root element I get one warning for the file, if there are multiple root elements I get a warning for each closing tag.
I don't understand what this rule complains as, according its documentation, it is there for the eslint-disable comments, which I don't have in my templates.
I had the same issue but in nuxt with eslint, i just needed to update eslint-config and eslint-module:
"#nuxtjs/eslint-config": "^5.0.0",
"#nuxtjs/eslint-module": "^3.0.1",
source: https://github.com/nuxt/eslint-plugin-nuxt/issues/121
I've just updated my npm dependencies and I have the same error.
I was reading the eslint documentation and finally I've realized that you can remove the false error if you setup the rule in the .eslintrc.js config file.
this is my .eslintrc.js config file:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'#nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended'
],
plugins: [
'prettier'
],
// add your custom rules here
rules: {
"vue/comment-directive": 0
}
}
add the rule "vue/comment-directive": 0 and that is!, the error message is removed!.
the possible values are:
0 means disabled
1 means warning
2 means error
Try to change it in your IDE to how it works
(In my case I've had to stop the server and re-run it every time that I've changed a value in this config file.)
I have the same error.
I was taught how to fix this error.
https://qiita.com/tashinoso/items/a72741ca8e2fd928ca77#comment-3e6cd674353056ecbb3a
module.exports = {
...
overrides: [
{
files: ["*.vue"],
processor: "vue/.vue"
}
]
}
Set this snippet on .eslintrc.js
"vue/comment-directive": ["error", {
"reportUnusedDisableDirectives": false
}]
Solve my issue, i wonder why. Solution from documentation
Node v12.20.0
This is a kind of a temporary fix that worked for me and I think it will work for you as well.
vue/comment-directive
This rule is included in all of "plugin:vue/base", "plugin:vue/essential", "plugin:vue/vue3-essential", "plugin:vue/strongly-recommended", "plugin:vue/vue3-strongly-recommended", "plugin:vue/recommended" and "plugin:vue/vue3-recommended".
ESLint doesn't provide any API to enhance eslint-disable functionality and ESLint rules cannot affect other rules. But ESLint provides processors API.
This rule sends all eslint-disable-like comments as errors to the post-process of the .vue file processor, then the post-process removes all vue/comment-directive errors and the reported errors in disabled areas.
All you need to do is add
eslint-disable-next-line vue/component-tags-order
this line as comment above anywhere you using comments within tags in each block you need to specify if comments are added.
For more information please visit:- https://eslint.vuejs.org/rules/comment-directive.html
I have empty rules in my .eslintrc file but I am still getting some error messages like "max-len exceeding 120 characters."
{
"env": {
"es6": true,
"browser": true,
"node": true
},
"rules": {
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"ecmaFeatures": {
"jsx": true
}
}
The documentation says that all rules are disabled by default. I wonder why I am still getting eslint errors without my defining any rules.
I am using eslint version v1.10.3
I can get rid of the errors by explicitly disable the rule "max-len": 0
This is the ONLY configuration file I have in my project folder and I even searched to make sure there isn't even one single word of max-len in my project.
Are all rules disabled by default ? Where did I get the rules (e.g. max-len) from ?
ESLint configurations cascade. So given a path to lint, ESLint will go up the directory structure to find config files until it either hits config with root:true or root directory. All the config files that will be found are going to to be merged together. There's a chance that you might have another config file somewhere in your path. In order to test that, you can run ESLint with the --debug flag, which will list all of the config files that are currently being used.