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).

Svelte and ESLint

A few days ago I decide to migrate frontend application to Svelte from Vanilla JS (specific reasons).
And at first I decided to configure eslint config. I spent about 3 hours to find an answer of how to integrate svelte into eslint and I didn't find nothing besides this plugin
Here is my eslint config
module.exports = {
extends: ['eslint:recommended', 'prettier'],
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
env: {
es6: true,
browser: true
},
plugins: [ 'svelte3' ],
overrides: [
{
files: '*.svelte',
processor: 'svelte3/svelte3'
}
],
globals: {
"module": true,
"process": true,
},
rules: {
// ...
},
settings: {
// ...
}
};
Here is dev. dependencies of package.json:
Where is contains my svelte components:
I have non formatted code:
And what tell me eslint:
After eslint . and eslint . --fix commands the code of svelte component still non formatted
I'm sure that I'm doing something wrong, hope on your help.

To use eslint with svelte 3, all you have to do is :
npm install \
eslint \
eslint-plugin-import \
eslint-plugin-node \
eslint-plugin-promise \
eslint-plugin-standard \
eslint-plugin-svelte3 \
--save-dev
Add this script in package.json :
"scripts": {
"lint": "eslint . --ext .js,.svelte --fix"
},
And add a file .eslintrc.js next to the package.json file :
module.exports = {
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
env: {
es6: true,
browser: true,
node: true
},
extends: [
'eslint:recommended'
],
plugins: [
'svelte3'
],
ignorePatterns: [
'public/build/'
],
overrides: [
{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}
],
rules: {
// semi: ['error', 'never'] // uncomment if you want to remove ;
},
settings: {
// ...
}
}
Then you can run npm run lint to fix your files.

ESLint (and linters in general) are good for finding and potentially fixing things that violate certain rules, but ESLint isn't primarily a formatting tool.
To format Svelte files automatically, you'll have better luck with Prettier and the Svelte plugin for Prettier.
If you're using Visual Studio Code, you can install the Svelte for VS Code plugin which will be able to format your files automatically when you save them (assuming you have formatOnSave turned on).

I assume you are using VSCode by looking at your screenshots. At the documentation's page of the plugin you mention, there's an explanation of how to configure it in your code editor. ( https://github.com/sveltejs/eslint-plugin-svelte3/blob/master/INTEGRATIONS.md )
You'll need the ESLint extension installed.
Unless you're using .html for your Svelte components, you'll need to configure files.associations to associate the appropriate file extension with the html language. For example, to associate .svelte, put this in your settings.json:
{
"files.associations": {
"*.svelte": "html"
}
}
Then, you'll need to tell the ESLint extension to also lint files with language html and to enable autofixing where possible. If you haven't adjusted the eslint.validate setting, it defaults to [ "javascript", "javascriptreact" ], so put this in your settings.json:
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
}
]
}
If you are using an extension that provides Svelte syntax highlighting, don't associate *.svelte files with the html language, and instead enable the ESLint extension on "language": "svelte".
Reload VS Code and give it a go!

SublimeLinter for JavaScript - enable unused variables warnings

I installed SublimeLinter for linting JavaScript in Sublime. It works, but i want to change it's settings so it'll always detect unused variables. I managed to do it by adding // jshint unused:true to top of the .js file itself, but i want to make it default so it'll always work.
I tried adding the setting to the SublimeLinter user settings in SublimeText, but it didn't work:
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"jshint": {
"#disable": false,
"args": [],
"excludes": [],
"unused": true, <-------- THIS
"ignore_match": ["Missing semicolon"]
}
},

I managed to create the .jshintsrc file under windows thanks to the tip from Alexander Nied. That is: Name the file ".jshintsrc.", windows explorer will drop the last dot when you hit enter. I created the file in C:\ but probably can be put in other paths.
The settings i used for my .jshintsrc file, for NodeJS development:
{
"undef": true,
"unused": true,
"node": true,
"globals": {
"MY_GLOBAL": true
}
}