As the title says, would it be possible for eslint to show warnings instead of errors on ALL of the rules? I'm using Standard JS, if that information is relevant.
Thanks!
I think there's no out-of-the-box option right now, but maybe you could use a plugin to achieve that:
Eslint plugin only warn
Or set all the rules as warning instead of errors.
Following es-lint-plugin-prettier readme, edit your .eslintrc.json and put a specific rule for prettier:
"rules": {
// maybe your other rules...
"prettier/prettier": "warn"
}
Then, prettier rules will be issued as warnings instead of errors.
Not sure of all the side effects, but it seems to work ok for my project, where I also use #typescript-eslint/eslint-plugin, #typescript-eslint/parser, eslint-config-prettier and eslint-plugin-prettier.
If it helps, my extends config in .eslintrc.json:
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
You can create an .eslintrc file with all the rules set to "warn"
If you already have an eslintrc file you can use that, or extend from a rules file such as the one here. In this one, all the rules are set to 0 (disabled). You can modify specific ones or all of them and set them to 1 (or "warn")
Related
I have a fresh Next.js project with a clean set of jsconfig declarations as per:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"public/*": ["./public/*"],
"styles/*": ["./src/styles/*"],
"utils/*": ["./src/utils/*"],
"components/*": ["./src/components/*"]
}
}
}
Yet, out of nowhere, they're now returning Can't resolve 'styles/styles.scss' and I can't identify what has changed. What's the best way to debug this to find the cause, or what are some common causes for this?
There are a few things you can try to debug the issue.
Make sure that the file 'styles/styles.scss' exists in your project and that the file path is spelled correctly in your jsconfig declarations.
Check your dependencies and make sure that you have all the necessary packages, such as 'node-sass' or 'sass-loader', installed and configured correctly.
Check if there are any conflicting configurations or settings in your webpack config file that may be causing the issue.
Check your package.json file, if you are using any package or tool that is transforming your scss files, make sure that it is configured correctly and that the package is up to date.
Check if there are any other error messages in your console, they may be related to the problem and provide more information.
If none of the above works, try re-creating the project from scratch and see if that resolves the issue. Hope this helps!
I installed eslint-plugin-import-order and add it to eslintConfig in package.json.
Error I have:
Definition for rule 'import/order' was not found (import/order)
Please, help me to deal with it.
Sandbox: https://codesandbox.io/s/elegant-elbakyan-pilnc
Note: eslint-plugin-import-order has been deprecated. Please use this
https://github.com/benmosher/eslint-plugin-import
create a .eslintrc.json file and add the plugin like below.
{
....,
"extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
"plugins": ["import"],
.....
}
Restart your local server once to ensure the changes are reflected.
I need an extension for checking, if my javascript has a semicolon on the lineend. By searching the extension i only could find auto set semicolon extension, but i want to check large existing code.
Maybe i can build a custom rule?
As Alexis Mateo mentioned you can use the ESLint Extension for vscode.
If you want to check for semicolons after a statement you do not need to write your own rule.
Instead by setting an option like this in vscode's settings.json:
{
"eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}
you tell the extension where to look for the rule set it should apply.
Now you add the semi rule to your .eslintrc.json like this:
{
"rules": {
"semi": ["error", "always"]
}
}
Here you can explore further rules.
you need to install a extension i recommend you install esLint. esLint let you write rules to follow in your code.
Recently, I've started using Visual Studio Code for my editor and found the Prettier - JavaScript formatter. I think it's a great plugin because it helps me keep my code looking nice.
I set up Airbnb's ESLint config and have found that to be super helpful.
Here's the catch. The Airbnb ESLint config I'm currently running doesn't play nice with Prettier. For example, for JavaScript string, Prettier is formatted to include double ticks and Airbnb's ESLint like single ticks. When I format the code using Prettier, then Airbnb's ESLint doesn't agree.
I know Kent Dodds has done some work with ESLint configs, among others, example here.
But I can't seem to find a solution that lets me use the magic of Prettier to format my code to Airbnb's ESLint.
I think eslint-config-prettier was created just for this purpose: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules
Basically it turns off all rules that have to do with code styling because prettier will take care of it anyway.
So you just install this config along with any other desired eslint config (like eslint-config-airbnb) and in your eslint configuration file you just add it to the extends field. For example:
{
"extends": ["airbnb", "prettier"]
}
Here are a few ways to do it, in order of recommendation. I would prefer the first approach as you won't ever have to bother with other rules that might conflict in future.
i) Install eslint-config-prettier and extend from it in .eslintrc. Doing this turns off some of the formatting-related rules within ESLint that might conflict with Prettier:
{
"extends": [
"airbnb",
"prettier"
]
}
ii) Adding "singleQuote": true to the .prettierrc config file:
{
"singleQuote": true,
...
}
iii) Adding a --single-quote command line option when you invoke Prettier:
$ prettier --single-quote ...
iv) Turn off ESLint's quotes rule within your .eslintrc config file (and potentially others that might conflict):
{
"rules": {
"quotes": "off",
...
}
}
A cleaner way is:
yarn add --dev eslint-plugin-prettier eslint-config-prettier
// .eslintrc
{
"extends": ["airbnb", "plugin:prettier/recommended"]
}
The plugin:prettier/recommended does three things:
Enables eslint-plugin-prettier.
Sets the prettier/prettier rule to "
Extends the eslint-config-prettier configuration.
And then if you are on react, you could add prettier/react too:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
Here is a little interactive CLI tool I built to setup ESLint with Prettier. Just install it and run:
npx eslint-prettier-init
Which will resolve your issue.
So, you have your .eslintrc file, with the property "extends": "airbnb"
Add another property, rules, and the rules that you will write in there will overwrite the ones inherited from airbnb
"extends": "airbnb",
"rules": {
"eqeqeq": 2,
"comma-dangle": 1,
}
Now here I'm just overwriting two random rules, you will need to look for the one you need :)
How do I tell an Atom linter, specifically js-standard, to ignore a rule? I want it ignored project-wide, and I thought that I could achieve this with a package.json or a .eslintrc but I can't get either to work. The rule I want to disable is camelcase
I should be able to do this in a package.json file, because the js-standard linter has an option called honorStyleSettings:
Honors style settings defined in package.json.
Current style settings supported:
ignore
parser
What's the syntax of these settings?
For the record, here's how to use js-standard in Atom while selectively disabling a certain rule.
Disable the linter-js-standard Atom package
Install linter-eslint
Add an .eslintrc file:
{
"extends": ["standard"],
"rules": {
"camelcase": 0
}
}
You may also need to install standard and eslint via npm, if you don't have them already.
Using the default install, there is no way to do this in linter-js-standard. (I believe this was a conscious decision on the part of the module authors who believe that standard is a hard target rather than an ideal.)
If you wish to use eslint-style comments to disable linting for certain lines or code sections, install babel-eslint via npm i --save-dev babel-eslint and add
{
...
"standard": {
"parser": "babel-eslint"
}
...
}
to your package.json file which will allow you to annotate your source as needed.
Example
Assuming foo is defined but not used elsewhere in your file, linter will warn: 'foo is assigned a value but never used. (no-unused-vars)'
const foo = 1
After installing babel-eslint, configuring standard in your package.json file, and adding this comment, linter will ignore the line.
const foo = 1 // eslint-disable-line
See Configuring ESLint for other configuration annotations.
I've managed to disable the "camelcase" rule by going to "linter-js-standard" package folder and adding to node_modules/standard/eslintrc.json file the following line:
"rules": { "camelcase": [0] }
So the entire "eslintrc.json" looks like:
{
"extends": ["standard", "standard-jsx"],
"rules": { "camelcase": [0] }
}
Just save or edit your .js file in Atom for the changes to take effect.
On my Linux desktop the full path to eslintrc.json is:
~/.atom/packages/linter-js-standard/node_modules/standard/eslintrc.json
Of course, when you update the "linter-js-standard" package in Atom, you'll have to do the above steps again.
To turn the "camelcase" rule on you may change the "camelcase" value to [2] instead of deleting the entire "rules" line:
"rules": { "camelcase": [2] }
If it is ESlint that your plugin uses then create a .eslintrc file in the root of your project & write your rules within there.
Heres an example of a .eslintrc file github example. I find i need to close and reopen Atom to refresh the lint errors
EDIT:
showEslintRules (default: false). You will need to change this option to true.