Disable a specific ESLint rule when fixing on save with VSCode - javascript

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)

Related

Module build failed - no ESLint configuration found after import

I have worked on a vue project which I created using vue cli. Because of this, eslint is also included in the project. Up until now I haven't done much with eslint. If I understood correctly, eslint helps with stylistic errors, semantic errors etc in the code to identify potential problems.
I only rarely used // eslint-disable-next-line if there was e.g. a console.log clashing with the rules.
Now I wanted to include some new javascript code into the project. This code comes from someone else, so I cloned the repo and then just imported it in my main.js via a relative path to the folder/file that I have cloned. I think this was okay. However now I get some problems with eslint as the imported file has no config for eslint.
This is the exact error originating from the import:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found
I am not sure what to do now, even though I already searched for the error.
I only saw some config for eslint in the package.json, I think. If it would help to have its content or something else, please say so and I will add it!
How can I tackle this problem? Thanks in advance!
This might be a long shot, but this is the .eslintrc.js file I shove into all my react projects at the root directory to get rid of that error. You'll want to change some of the settings but this is the basic structure.
module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
jest: true,
},
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
},
plugins: ['react', 'react-hooks'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:json/recommended',
'prettier',
],
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/prop-types': ['off'],
'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }],
},
};

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"

TSLint: how to ignore JS files?

How can I tell tslint to ignore JS files?
In tsconfig.json I have "allowJs": true because I do want it to compile JS files:
{
"compilerOptions": {
// ...
"allowJs": true,
// ...
},
// ...
}
However I do not want it to lint them.
With this setup, it complains that "No valid rules have been specified for JavaScript files". This is because it tries to lint JS files, but has not been given any rules for doing so.
It has been suggested in another Stack Overflow thread to add the following, so that it has some rules to go by (a bit of a hack really):
"jsRules": {
"no-empty": true
}
But what if I don't want it to check for this rule either? I just don't want it to lint JS files at all.
I've found out how to do this.
To ignore JS files, add the following to your tslint.json (you can, of course, ignore any file type in a similar fashion)
"linterOptions": {
"exclude": [
"**/*.js"
]
}
Note that linterOptions.exclude was introduced in tslint 5.8, so you must have this version or later to use this feature.

Settings for ESLINT to ignore warnings like "extra semicolon"

I'm using the Atom Code Editor for a VueJS Project with ESLINT (feross). By trying to quickly prototype a layout I get these errors.
Missing space before opening brace
Strings must use singlequote
Extra semicolon
During the prototype phase I would like ESLINT/ATOM to disable/ignore these errors and render the site anyways.
How to do that?
You could temporarily turn off eslint. In my setup, inspecting build/webpack.base.conf.js shows the following snippet:
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
The linting rule will enable eslint. Lets avoid that and set config.dev.useEslint to false. Go to config/index.js and alter the following snippet:
// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: false,
In your .eslintrc file, do the following:
"rules": {
"space-before-blocks": "off",
"quotes": "off",
"no-extra-semi": "off"
}
This will turn off the above rules. I would suggest instead of turning it off let it throw warning, so in future you remember to fix these issues.
ESLint has an awesome documentation: https://eslint.org/docs/rules/

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
}
}

Categories