We Keep Coding

Disable a specific ESLint rule when fixing on save with VSCode

I'm trying to disable eslint's fixing on save for a specific rule when using vscode. In practice I'd like React hooks' dependency array issues to be shown to the user but not fixed. This is my settings.json:
{
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"eslint.codeActionsOnSave.rules": [
"!react-hooks/exhaustive-deps",
"*"
],
"eslint.validate": ["javascript", "javascriptreact"]
}
I would expect eslint to show a warning when I break the exhaustive deps rule, but leave it there when I save the file. Instead my code is still fixed on save, what am I doing wrong?
(note: the hooks dependencies rule shouldn't be broken, but I'm working on an existing project, I can't review all existing hooks and I've already seen the code break because of hooks triggering when they shouldn't have because of ESLint's auto-fixing)

autosave main scss file instead of having to save it manually

My folder structure is as follows
I am using 'live sass compiler' in vscode to watch files. But every time I update other scss files like _globals.scss I have to manually save style.scss for the changes to reflect. Is there a work-around to auto save style.scss instead of having to save it manually.
my settings.json for live sass compiler are as follows:
{
"editor.tabSize": 2,
"editor.fontSize": 18,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"terminal.integrated.defaultProfile.windows": "Git Bash",
"liveServer.settings.donotShowInfoMsg": true,
"files.autoSave": "afterDelay",
"workbench.editorAssociations": {
"*.ipynb": "jupyter.notebook.ipynb"
},
"editor.renderWhitespace": "none",
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"]
}

This seems bizare. Anything with a leading underscore should compile all files. Do you still have the issue on my active fork?

Eslint is working from terminal, but not showing error in the editor UI (VSCode)

I've installed the ESlint by following these steps: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6
Now, my ESlint is working from the terminal, but errors/warnings are not displaying in the code window, here is my project structure and how it is looks like:
and my eslintrc configs:
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
},
extends: [
'airbnb-base',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaVersion: 2018,
},
rules: {
},
};
Why it couldn't show errors in the editor?

I ran into this recently, and fixed it by changing my .eslintrc.js file to just .eslintrc (JSON object only, no comments, everything quoted right, no extension). After restarting VSCode it picked up the file properly and gave me linter errors in VSCode.

for me it's work !
setting.json add this
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
https://linuxpip.org/eslint-not-working-in-vscode/

I followed all the advice and still had issues. I am using Typescript + YARN 2 (w\ PnP).
The error I was receiving was Failed to load the ESLint library for the document [filename].ts
What fixed it for me was that I needed to create some editor SDKs and settings with the command:
yarn dlx #yarnpkg/sdks vscode.
My .vscode/settings.json for eslint looks like:
"eslint.enable": true,
"eslint.packageManager": "yarn",
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"eslint.nodePath": ".yarn/sdks"
The command above added "eslint.nodePath": ".yarn/sdks"
I found this here (I followed this and this to get there).

VsCode not formatting TS/JS files with single quotes

After one of the latest updates to VS Code, when pressing Ctrl+Shift+F In windows, it is auto
formattig all of my code with double instead of single quotes despite my setting it to only use single quotes.
Here is my settings file:
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"atlascode.jira.workingSite": {
"baseUrlSuffix": "atlassian.net"
},
"yaml.schemas": {
"file:///c%3A/Users/kevin/.vscode/extensions/atlassian.atlascode-2.1.5/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
},
"window.zoomLevel": -1,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true,
"javascript.preferences.quoteStyle": "single",
"typescript.preferences.quoteStyle": "single",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
Is anyone else dealing with this?
Thanks!!!

From your settings file, it seems like you are using prettier for code formatting.
In the latest updation, prettier changed reading configuration from common settings file to a dedicated file for prettier settings. You can configure prettier via many options they've provided.
https://prettier.io/docs/en/configuration.html
Example (JSON):
Create .prettierrc file, written in JSON or YAML, with optional extensions: .json/.yaml/.yml (without extension takes precedence).
.prettierrc
{
"singleQuote": true
}
Then provide absolute path of .prettierrc file in settings.json (vscode settings file).
settings.json
...
"prettier.configPath": "./.prettierrc"
...
Hope this helps!

The answer by Jins Thomas Shaji is very helpful. But except what he said, you also need to add a line in .prettierrc
"jsxSingleQuote": true
So, conclution:
.prettierrc
{
"singleQuote": true,
"jsxSingleQuote": true,
}
settings.json
"prettier.configPath": "./.prettierrc"

Why eslint does not check JS?

Eslint loads, but does not fix 'problem js'...
File eslint.config.json
{
"ecmaFeatures": {
"jsx": true
},
"env": {
"browser": true,
"node": true,
"jquery": true
},
"rules": {
"quotes": 0,
"no-trailing-space": 0,
"eol-last": 0,
"no-unused-vars":0,
"no-underscore-dangle":0,
"no-alert": 0,
"no-lone-blocks": 0
},
"globals": {
jQuery: true,
$ : true
}
}
In JS file i can use global variables...
Lint does not check JS.

If you are using version newer then 1.0.0 none of the rules are enabled by default. Since your config above only shows disabling rules, that means eslint runs with no enabled rules, and as such, doesn't find any errors. What you might want to do is add the following line to your config:
{
"extends": "eslint:recommended"
}
which will enabled all of the rules marked as recommended on this page.
Or you can also extend from existing configs that you can find on NPM by searching for eslint-config-

I had same issue. Adding below line in the .eslintrc helped:
"extends": ["eslint:recommended", "plugin:react/recommended"]
Note: extends option might be already there but without the plugin option.