Related
When I create a new Nuxt.js project, I've a really exhausting problem with ESLint and Prettier.
If I save on this .vue file, Prettier try to fix it but ESLint prevent it to do this. So, I can't remove errors on this.
My eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'#nuxtjs',
'plugin:prettier/recommended',
'plugin:nuxt/recommended',
],
plugins: [],
// add your custom rules here
rules: {},
}
My .prettierrc
{
"semi": false,
"singleQuote": true
}
My settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": true,
}
I don't modify ESLint and Prettier files generated.
I suppose the problem come to my VS Code settings, ESLint settings or Prettier. I try some solutions but nothing works.
EDIT
If you have this problem, I advice you to uninstall Visual Studio Code and cache... to reinstall it with fresh install.
I found a solution, not perfect but it works:
VSCode extensions
ESLint on VSCode
Prettier on VSCode
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended',
'eslint:recommended' // <- add this line
// 'plugin:prettier/recommended', <- remove this line
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {},
plugins: [
'prettier'
]
}
settings.json into VS Code
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.probe": [
"javascript",
"javascriptreact",
"vue"
],
"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll.eslint"
],
"vetur.validation.template": false,
// ...
}
package.json
{
// ...
"devDependencies": {
"#nuxtjs/eslint-config": "^6.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/tailwindcss": "^4.0.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.28.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.7.0",
"postcss": "^8.2.8",
"prettier": "^2.2.1"
}
}
Close and open again VS Code to reload rules or reload your window
I think problem come to VS Code settings with some ESLint conflicts with Prettier. It's not THE solution, it's just a solution. If you have any other to offer, I'm really interested.
ESLint rule sometimes confilicts with prettier rule. Try moving 'plugin:prettier/recommended' after 'plugin:nuxt/recommended' in .eslintrc.js to overwrite ESLint rule nuxt provides.
According to eslint-config-prettier's doc:
Then, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
And eslint-config-prettier is used by eslint-plugin-prettier:
This plugin ships with a plugin:prettier/recommended config that sets up both the plugin and eslint-config-prettier in one go.
Best compatible for Nuxtjs (2022) .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:vue/essential',
'#nuxtjs',
'plugin:prettier/recommended',
'prettier',
],
parserOptions: {
ecmaVersion: 12,
parser: '#babel/eslint-parser',
sourceType: 'module',
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'warn',
'no-unused-vars': 'warn',
'space-in-parens': 'off',
'computed-property-spacing': 'off',
'max-len': 'warn',
},
}
This is confusing because I have one project set up with a .eslintrc.js that formats everything fine, but I can't get it to work on another project that is a very similar setup. Here is that file:
I have Prettier set as the formatter, and VSCode set to format on save. But when it formats, it seems to use the rules from the Prettier settings page in VSCode, and not from the eslintrc file. The result is that it formats the code in one way and then throws a linting error because the way it formatted is not following the rules. I know it's gotta be something stupid but I can't figure out how to make it use the ESLint settings to format.
This is eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
node: true
},
extends: [
"prettier",
"eslint:recommended",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended",
"plugin:react/recommended"
],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly"
},
parser: "#typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: "module"
},
plugins: ["#typescript-eslint", "prettier"],
settings: {
"import/parsers": {
"#typescript-eslint/parser": [".ts", ".tsx"]
},
"import/resolver": {
typescript: {}
}
},
rules: {
"prettier/prettier": ["error"],
"react/jsx-uses-react": 1,
"max-len": [2, { code: 80, comments: 120, tabWidth: 2 }],
"#typescript-eslint/interface-name-prefix": 0,
"#typescript-eslint/no-unused-vars": 0
}
};
Ah okay so the answer here was to implement the right Prettier rules in .prettierrc.
The VSCode Prettier settings can be set specifically for the workspace, which was what caused me confusion (I had trailingComma set to none in another workspace which made me confused about why that workspace was correctly formatting things).
I added this code to .prettierrc, which makes the Prettier formatter consistent with the ESLint rules:
{
"arrowParens": "avoid",
"trailingComma": "none",
"tabWidth": 2,
"semi": true,
"singleQuote": false
}
I (mistakenly?) thought that Prettier automatically derived its formatting options from the ESLint rules.
I am totally new to VSCode and this is my first setting. I know that this is a very common problem but I couldn't find a suitable solution for it.
This is my understanding so far. Please correct me if I am wrong.
I want to use ESLint for finding errors in Javascript code and Prettier for formatting all languges. But it seems that we could also format our javascript code with ESLint! There are some useful rules that I like to use it and it seems Prettier don't have those like ( space-in-parens ).
So I decided to use ESLint as my formatter in Javascript. Now I can see that there are a lot of tutorial for "How to integrates ESLint with Prettier" in web. The idea is to extend Prettier rules with a plugin and add those ESLint specific rules to it. Reasonable!
I ended up with the following settings. Please take a look at my settings for using ESLint and Prettier below:
my eslint config file:
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ["prettier"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: [
"prettier"
],
"rules": {
"space-in-parens": ["error", "always"],
"quotes": ["error", "single"],
"prettier/prettier": "error"
}
};
my user setting file:
{
"terminal.integrated.shellArgs.linux": [
"-l"
],
"remote.SSH.remotePlatform": {
"dev-all": "linux"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript"
]
}
and finally my package.json file:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.4"
}
}
Now the problem is that whenever I save my javascript code, formatting toggles! for example with the first save, I have "single quote" and with the next save I have "double quote". I thinks my understanding of the whole idea is wrong. Could you explain it for me and tell me how to correct it. I am spending so much time to figure it. By the way, I have also installed two extensions in vscode: "ESLint" and "Prettier".
This is potentially because of conflicting rules between ESLint and Prettier plugins. Now you have two options
Either let ESLint know that you want to use Prettier as a formatter.
https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi
2.You can configure ESlint and Prettier together and resolve the conflicting
rules without any conflicts.
https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/
I have decided to let ESLint do formatting for me in JavaScript and prettier for all other languages. You could find my setting on my git.
To solve conflict
install eslint configuration for prettier
npm install eslint-config-prettier
And include it in the extends option in the file .eslintrc.js
extends: [
...,
"prettier",
],
You can follow these settings by Sumit Saha. Your conflicting will be gone. These settings give more power to eslint over prettier. I am copy-pasting those.
In the .vscode/settings.json file :
{
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
And, in the .eslintrc file:
{
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"react/react-in-jsx-scope": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": 0,
"react/state-in-constructor": 0,
"indent": 0,
"linebreak-style": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}
]
},
"plugins": ["prettier", "react", "react-hooks"]
}
Well, I am happy with TSLint along with ESLint.
And I have a habit of doing Ctrl+Shift+F often during writing code.
Also, you can try indent-rainbow, bracket pair colorizer and my favourite, peacock.
I am using the Svelte Plugin for vs code: https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
I also have the eslint and prettier plugins installed:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
In addition, I have set up .eslintrc.js and .prettierrc files as follows:
// .eslintrc.js
module.exports = {
env: {
browser: true,
es6: true
},
extends: ['prettier'],
overrides: [
{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}
],
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
plugins: ['prettier', 'svelte3'],
rules: {
'prettier/prettier': 'error',
'svelte3/lint-template': 2
}
}
// .prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"plugins": [
"svelte"
],
}
Now everything seems to work like it supposed to. But there is one functionality that I would like to change. I would like to have my html on top of the style tags in my .svelte file (and, if possible, also on top of the script tags).
However, when I click on save, it automatically moves all of my html to the bottom of the file.
How can I override this?
Thanks.
prettier-plugin-svelte has a svelteSortOrder option, that can be added to your .prettierrc file.
In your case, it would become:
// .prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"plugins": [
"svelte"
],
"svelteSortOrder": "scripts-markup-styles"
}
I'm using VS Code for a React project and have VS Code configured to format on save and to Require a 'prettierconfig' to format (the Prettier: Require Config setting from the VSCode Prettier extension). I also have the ESLint plugin enabled.
That seems to mean my project's .prettierrc config file drives the formatting on save and .eslintrc.json provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.
The code below, as formatted, shows eslint(indent) squiggly warnings in VS Code. Upon save (Ctrl + S), some get resolved, but some do not.
Specifically, the incorrect indent spacing of the first <div> gets fixed on save and that eslint(indent) warning disappears. However, the later eslint(indent) warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click Ctrl +Shift+ P, then find and click the "ESLint: Fix all auto-fixable Problems".
When I save the file again those changes are reverted and the warning appears again.
So "format on save" applies different formatting than "ESLint: Fix all auto-fixable Problems". Is there a way to reconcile these? I would like all the eslint(indent) issues to resolve on save.
Does anyone know what ESLint settings drive "ESLint: Fix all auto-fixable Problems"?
const MyModule = () => {
...
return (
// "eslint(indent)" warning on next line gets resolved on save
<div>
{!menus.find(function(permission) {
return permission.level === 'ADMIN';
}) ? (
// "eslint(indent)" warnings below DO NOT get resolved on save
// ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
// ... then they reappear on save
<div>
<Redirect to="/" />
</div>
) : (
<div>
<Results />
</div>
)}
</div>
);
};
export default MyModule;
My .eslintrc.json contents:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"no-console": 1,
"no-control-regex": 0,
"indent": ["warn", 2],
"quotes": ["warn", "single"],
"space-in-parens": 1,
"prefer-destructuring": 0,
"prefer-const": 0
},
"parser": "babel-eslint",
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
My .prettierrc:
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
Like the other posted suggested, I use a setup where eslint runs prettier for me. I already had prettier disabled for my js/ts files so I knew that wasn't the issue. It turns out it was the built in formatter for vscode and turning off editor.formatOnSave fixed the issue.
My project's settings.json. This disables the formatter only for typescript files. Eslint will still fix your files as long as you have the eslint auto fix settings enabled.
{
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
Rather than turning off formatOnSave, you could instead set the default formatter to eslint:
{
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
Here are the rest of my settings just for reference.
My user settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"markdown"
]
}
.eslintrc
{
"root": true,
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"project": "tsconfig.json",
"warnOnUnsupportedTypeScriptVersion": false
},
"plugins": ["#typescript-eslint", "jest", "prettier"],
"extends": [
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
"rules": {
"prettier/prettier": [
"error",
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 110
}
]
}
}
Instead of using both prettier and eslint formatters, just use the eslint formatter and add your prettier options inside your eslintrc file. Here's an example
https://prettier.io/docs/en/integrating-with-linters.html
// .eslintrc.json
...
"rules": {
"prettier/prettier": [
1,
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
]
}
...