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")
I'm using ESLint with its VS Code extension to format my code.
At some point it stopped auto-formatting the code on save. I uninstalled everything and reinstalled anew: VS Code, ESLint and ESLint extension for VS Code.
I think I'm close to making the formatter work, but ESLint logs this in VS Code when I try and save a file with a linting error:
2020-10-10T10:41:45.345Z eslint:source-code-fixer shouldFix parameter was false, not attempting fixes
I guess if I find that shouldFix parameter and set it to true it'll work, but where is it?
The above solution didn't work for me. I had to explicity add the following to my VSCode settings.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
I think maybe something in the newest VSCode update communicating this with the plugin went wrong.
I managed to fix it changing the .eslintrc.js at the root of the project.
'parserOptions': {
'ecmaVersion': 12,
}
instead of
'parserOptions': {
'ecmaVersion': 2018,
}
I don't know why it worked till yesterday and then stopped.... but well that solved it for me.
Configuring a default formatter resolved this for me. From the extension's page:
eslint.format.enable (#since 2.0.0): uses ESlint as a formatter for files that are validated by ESLint. If enabled please ensure to disable other formatters if you want to make this the default. A good way to do so is to add the following setting "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" } for JavaScript. For TypeScript you need to add "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }.
run npm run lint
this will start debugging your code with eslint and your error should be solve then,
In my Nuxt application where ESlint and Prettier are installed and enabled, I switched to Visual Studio Code.
When I open a .vue file and press CMD+ Shift + P and choose Format Document, my file does not get formatted at all.
My .prettierrc settings:
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
I have so many source code lines, so I cannot format them manually. What am I doing wrong?
Select File -> Preferences -> Settings (Ctrl + comma) and search form formatter
Set Prettiers as Default formatter.
If doing what #Simin Maleki mentioned does not solve it for you, there is a chance that your default formatter is not set:
File > Preferences > Settings > Search for "default formatter"
Make sure your Editor: Default Formatter field is not null but rather Prettier - Code formatter (esbenp.prettier-vscode) and that all the languages below are ticked. This fixed my issue.
STEP BY STEP WALKTHROUGH
Also make sure that your format on save is enabled:
Sometimes, prettier stops working when there are syntactic errors in the code. You can view the errors by clicking on the x button on the bottom right corner beside Prettier
Prettier could also format your files on save.
However, installing and enabling does not result in working.
You have to check "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting
You only have to configure your Default Formatter and check the checkbox in Format On Save in the settings, after installing prettier to make it work. Don't mess with other configuration files.
1 - Select Default Formatter
Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
Search for Editor: Default Formatter
Select your default formatter as Prettier - Code Formatter;
See the image below;
2 - Save On Format
Open Files -> Preferences -> Settings (or Ctrl + , in Windows).
Search for Editor: Format on Save
Click the check box under Format On Save;
See the image below;
disable and enable prettier extension solves my problem
I am not using Vue, but had the same problem.
I already had the settings
Editor: default formatter to prettier
Editor: Format on Save to true
I already had .eslintrc.js and .prettierrc files
But nothing worked.
The solution to my problem was that I had all set properly, except I needed to:
Command + Shift + p
type format document with
select Configure Default Formatter...
select Prettier as default.
I don't know why the Editor: Format on Save set to true was not enough.
I needed to select default formatter using the above steps so it worked.
can you try to add this section to your VS Code settings.json file?
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},
These three steps may solve your problem:
1 - Go to settings, then search for auto format
2 - Select Text Editor
3 - Select esbenp.prettier-vscode as your Default Formatter.
Simply said, go to Settings > User tab > Text Editor > Editor: Default Formatter and change it to prettier.
On Windows:
We can open the below file using:
Start > Run
File Path:
%AppData%\Code\User\settings.json
Change
From:
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
To:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Note:
If the above is not present, add it instead of changing.
You should already have installed the "Prettier - code formatter" to see the effect of the above change - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
you can still have issues in spite of all these settings. In this case, as pointed out in an earlier answer, then it would be a good point to check the prettier notification at bottom status bar in VSCode.
When clicking on that status, the output panel should report the issue in the HTML file. For me, the issue was I had a div inside a p tag which I assume prettier/VSCode conventions are against. When I removed it (and combined with all the settings above, namely default formatter and format on save) I got prettier working.
.prettierrc is not required unless you want to override VSCode settings
For me the problem was with HTML files where formatting stopped working one day. I had Format On Save configured, which worked in all files except HTML.
I then realized that I experimentally set Format On Save Mode to modification instead of file and forgot about it. This had an effect of not formatting anything in HTML files, surprisingly not even my changes. Setting it back to file solved the issue.
This is not a problem with Prettier itself, but prettier-vscode, the VSCode extension. According to its documentation, Vue formatting is disabled by default:
prettier.disableLanguages (default: ["vue"])
A list of languages IDs to disable this extension on. Restart required. Note: Disabling a language enabled in a parent folder will prevent formatting instead of letting any other formatter to run
In this case, to enable you should set "prettier.disableLanguages": []. And since this is an extension configuration, you should do it in VSCode settings file, not .prettierrc.
in my case it was being hijacked by typescript formatter.
it was driving me crazy because it kept re-formatting my spaces!
to fix i did cmd+. (settings) type -> "default formatter"
and unchecked typescript
1 .Use the other extension prettier was not working for me i just use the other VSCODE extension named PrettierNow i think this will help, done for me.Checkout the extension here
2 .From Latest Updates of prettier you need to add .prettierrc file in your root of the projects if you want to stick with prettier.
An example of .prettierrc is this-
{
"tabWidth": 4,
"singleQuote": true,
"semi": false
}
If Prettier formats all other files except HTML files automatically on save:
Press Cmd + P or Ctrl + P to open the command palette and type the following text in it:
> open settings
Click on Preferences: Open Settings (JSON) from the suggestion dropdown.
Inside the settings.json file, Check if "[html]" key exists. If the key exists and its value indicates using another formatting extension installed in Visual Studio Code, you should reset it back to use Prettier.
"[html]": {
"esbenp.prettier-vscode"
}
For an instance, sometimes, the value of "[html]" key could be "remimarsal.prettier-now" when you would have Prettier Now extension installed.
If you don't have any other formatting extension installed other than Prettier, you can also remove the "[html]" key altogether from settings.json file.
This is what worked for me (my default formatter was already set to Prettier)
Change default formatter to default
Restart vscode
Change default formatter back to Prettier.
How to format your code through VScode's ESlint plugin
Alright, rather than giving a guide on how to use VScode's Prettier extension, I'd rather explain how to rely on ESlint and have both worlds: checking that your code is correct (ESlint), then formatting it (Prettier).
What are the advantages of this?
not forcing your entire team to use VScode with the Prettier extension, maybe some prefer Vim, IntelliJ's Webstorm, Emacs etc... A tool-agnostic solution is IMO always better.
I think that linting your code is more important that formatting it, but if you have both extensions working at the same time, you may have conflicts between the formatting and the linting.
your hardware will struggle less, if you have less extensions running (mainly because it can stop the conflicts)
using an ESlint + Prettier combo will strip the need to have a specific personal configuration aside of the codebase (untracked). You'll also benefit from having Vue/Nuxt specific ESlint rules and a simpler/more universal configuration.
an ESlint configuration can be configured to be run before a commit, in a CI/CD or anywhere really.
How to achieve this kind of setup?
Let's start first by installing the ESlint extension and only it, DO NOT install the Prettier one.
Not installed Vetur yet?
I do heavily recommend it for Vue2 apps (what Nuxt is running as of today), you can find it below. It will allow to quickly and simply ESlint (+ Prettier) any .vue files.
When it's done, access the Command Palette with either ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac) and type Preferences: Open Default Settings (JSON)
There, you should have something like this
{
"workbench.colorTheme": "Solarized Dark", // example of some of your own configuration
"editor.codeActionsOnSave": {
"source.fixAll": true,
},
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx",
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
],
}
How to try that your configuration is now working?
To see if my solution is working, please download this Github repo, get the latest stable Node version (eg: 14) and run yarn to have it working. Otherwise, simply open VScode.
This repo can also be used to double-check that yours is properly configured by inspecting my files there!
Then, you could access any .js or .vue file and see the problems there (Command Palette: Problems: Focus on Problems View). nuxt.config.js and /pages/index.vue are good examples, here is the index.vue file.
You can see that we do have several things that can be fixed by Prettier but that we do also have an eslint(vue/require-v-for-key) error. The solution is available as a comment just below btw.
PS: if you want to have inline ESlint warnings/errors as in the screenshot, you can install Error Lens, it's a super amazing extension if you want to get rid of errors.
Save this file and you should saw that every auto-fixable things are done for you. Usually it's mainly Prettier issues but it can also sometimes be ESlint too. Since we do have the ESlint rules from Nuxt, you'll get some nice good practices out of the box too!
Tada, it's working! If it's not, read the section at the end of my answer.
If you want to create a brand new project
You can run npx create-nuxt-app my-super-awesome-project and select few things there, the most important being Linting tools: Eslint + Prettier of course (hit space to opt-in for one of them).
Warning: as of today, there is an additional step to do to have ESlint + Prettier working properly as shown in this Github issue. The fix should be released pretty soon, then the configuration below will not be needed anymore!
To fix this, run yarn add -D eslint-plugin-prettier and double check that your .eslintrc.js file is a follows
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '#babel/eslint-parser',
requireConfigFile: false
},
extends: [
'#nuxtjs',
'plugin:prettier/recommended', // this line was updated
'prettier'
],
plugins: [
],
// add your custom rules here
rules: {}
}
Then, you can have it working totally fine as above. Save the file and it should run ESlint then Prettier one after the other!
If you still have some issues
try to use the Command Palette again and ESLINT: restart ESLint Server or even Developer: Reload Window
feel free to leave a comment or contact me if you need some help
Go to Manage(located on left-bottom corner) -> Settings -> Users tab -> Text-Editor -> Formatting -> check the format on save
if not working then close and again open your vscode editor
Enabling "format on Save" in VSCode: Setting >> User >> Text Editor >> Formatting worked for me!
Recently I got the same problem, that Prettier does not format code automatically on saving. Checking Prettier, I saw an error: Invalid "arrowParens" value. Expected "always" or "avoid", but received true.
The error message was seen when I clicked this:
It turned out that I have Prettier Now installed also. This has a boolean value in my config file. After uninstalling Prettier Now, everything works fine.
If none of the other answers work, check that a conflicting prettier config .prettierrc does not exist in your working directory or check for .prettierignore to be sure the files/folders are not being ignored.
Check if there is a .vscode/settings.json file in your project directory (workspace). In my case someone had checked in this file:
{
"editor.formatOnSave": false
}
Solution: Delete the file (delete it from source control too) and add .vscode/ to .gitignore (if you're using git).
In some cases where prettier is provided as a dependency, you might need to install it before prettier vscode recognizes it using one of the following commands, depending on the package manager you are using
npm i or yarn
From the menu navigate through: view -> Command Palette
Form the command palette search for Format Document and then select Prettier as your format engine.
I had prettier already working on another project, but for the new one I had do it through this way to enable it again for the new project.
In my case it turned out I had configured prettier to use a configuration file that didn't exist (see screnshot below). That was hard to find since there wasn't any error message but prettier just didn't work. Maybe this helps somebody, too.
Check your package.json file for a property of prettier as this will take precedence.
{
"name": "example",
"scripts": { ... },
"prettier": {},
"dependencies": { ... },
"devDependencies": { ... },
}
Delete this property and the .prettierrc file will be used.
The order of precedence is stated in the prettier docs.
Some times with auto plugins update Required files used by Prettier might go missing .
Check this path if files are present here or folder is empty
C:\Users\YOURUSERNAME\.vscode\extensions\esbenp.prettier-vscode-2.2.2\out
If missing uninstall and reinstall prettier
For me - it was to do with ESlint which also works with Prettier. Eslint wasn't working (a local installation vs global installation conflict) which broke Prettier.
I Rolling back prettier to 1.7.3 and fixed it
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.