I have a vue project with an ESLint and prettier config like so:
"#typescript-eslint/eslint-plugin": "^4.26.1",
"#typescript-eslint/parser": "^4.26.1",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^7.28.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",
"prettier": "^2.3.1",
All of the packages should be up to date.
I get this error in VSCode and in the console, which I would like to supress because I want to allow such parantheses for better reading:
As far as I can read, this is what the no-extra-parens rule is for, but I cannot get it to work.
The documentation (https://eslint.org/docs/rules/no-extra-parens) states that it has an object option with several adjustments to this rule. If I, for an example, try any of these options:
"no-extra-parens": "0",
or
"no-extra-parens" :{
"returnAssign": false,
"nestedBinaryExpressions": false,
"ignoreJSX": "none|all|multi-line|single-line",
"enforceForArrowConditionals": false,
"enforceForSequenceExpressions": false,
"enforceForNewInMemberExpressions": false,
"enforceForFunctionPrototypeMethods": false
},
... the error in VSCode dissapears, and everything seems to be working fine. But upon serve the console throws this error:
I´ve tried with
"no-extra-parens": 0,
as the console says, but then the rule is ignored and the first rule break error is shown.
I´ve tried to define the rule in alot of different ways with arrays and objects, setting it to "off", etc. But either the rule does not work in VSCode, or the console states that the rule definition is invalid.
This is my .eslintrc.js file:
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript/recommended",
"#vue/prettier",
"#vue/prettier/#typescript-eslint"
],
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
"jsx": false
},
},
rules: {
"no-extra-parens": 0,
"no-console": ["warn", { allow: ["warn", "error"] }],
"no-debugger": "warn",
"curly": "error",
"quotes": [
"error",
"single"
],
"#typescript-eslint/ban-ts-comment": "off",
"#typescript-eslint/ban-ts-ignore": "off",
"#typescript-eslint/no-explicit-any": "off",
"#typescript-eslint/no-non-null-assertion": "off",
"#typescript-eslint/no-inferrable-types": "off",
"#typescript-eslint/no-use-before-define" : "off",
"#typescript-eslint/consistent-type-assertions" : "off",
"#typescript-eslint/no-empty-function": "warn",
"#typescript-eslint/interface-name-prefix": "off",
"#typescript-eslint/explicit-module-boundary-types": "off",
"#typescript-eslint/no-var-requires" : "off",
"#typescript-eslint/no-extra-parens": ["error"]
}
};
Any clue? 🤔
ESLint uses #typescript-eslint/no-extra-parens and doesn't need no-extra-parens, #typescript-eslint/* are supposed to aggregate * rules with same names, with the addition of features specific to TypeScript.
It's Prettier that affects this code, changing ESLint rules without disabling Prettier won't change the way it works.
The use of parentheses in this piece of code is redundant, as any as ... is a common construct in TypeScript and can be read and processed without parentheses:
const foo = bar as any as Foo;
Double as can be avoided in this case with:
const foo: Foo = bar as any;
Parentheses are necessary where type assertion is used as a part of an expression, in this case they will be kept by Prettier:
(bar as any as Foo).baz()
Prettier provides a consistent way to format the code with little configurability, this is its purpose, it shouldn't be expected to be fine-tuned for specific styles.
In case it's vital for the code to be formatted the way it is, and the setup uses Prettier through ESLint, it can be disabled where needed:
// eslint-disable-next-line prettier/prettier
I have a vue.js project with the storybook addon. I am trying to write a story using the Docs addon which allows you to write stories in .mdx, I am having trouble getting linting to work in vs code.
Thanks in advance and any help would be much appreciated!
I am using this sample project found here https://github.com/vueschool/storybook-fundamentals/tree/master.
The sample project has "eslint": "^6.7.2" installed.
I have installed "eslint-plugin-mdx": "^1.8.2"
I have the following extensions installed
My ES lint config looks like this, as suggested by https://github.com/mdx-js/eslint-mdx
{
"extends": ["plugin:mdx/recommended"]
}
It seems like vs code is picking up the mdx file but no linting seems to be happening, I'm I doing something wrong?
Also I have added the following to VS Code settings but it does not seem to be doing much
If this helps anyone. there is a dependency on eslint-plugin-react for eslint-mdx to work.
check https://github.com/mdx-js/eslint-mdx/issues/229
my eslint config looks like this for reference.
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended", "plugin:mdx/recommended", "plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
}
in Visual Studio Code with ESLint and Prettier when working on .vue files, it seems I can't get vue/max-attributes-per-line to auto-fix correctly.
For example, with vue/max-attributes-per-line set to 'off', and I try to add line breaks manually it corrects it to always have every element on no more than one line, no matter if it is 81, 120, 200, or more characters wide. How can I figure out what is forcing my markup elements onto exactly one line?
I am using ESLint version 5.1.0 and Visual Studio Code (without the Prettier Extension), with Prettier 1.14.2.
Here's the example in a .vue file-- I cannot make this go on multiple lines no matter what I do, when 'vue/max-attributes-per-line': 'off'. Every time I save, it forces the long line of markup to be all on one line.
<template>
<font-awesome-icon v-if="statusOptions.icon" :icon="statusOptions.icon" :spin="statusOptions.isIconSpin" :class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]" />
</template>
If I set 'vue/max-attributes-per-line': 2, it formats like so, with one line break(which is quite wrong as well).
<font-awesome-icon
v-if="statusOptions.icon"
:icon="statusOptions.icon"
:spin="statusOptions.isIconSpin"
:class="['saving-indicator', 'pl-1', 'pt-1', statusOptions.iconClasses]"
/>
If I try to reformat it manually, it just reverts to the above when I save.
Additionally, it seems to reformat twice when I hit Ctrl+S: first it reformats to put it all on one line, then a half-second later the formatting above results. Any ideas? What is causing this weirdness--are there multiple reformatters running? How do I figure out what the first one is to disable it?
VS Code workspace settings:
{
"editor.formatOnType": false,
"editor.formatOnPaste": false,
"editor.formatOnSave": true,
"[javascript]": {
"editor.tabSize": 2
},
"[vue]": {
"editor.tabSize": 2
},
"[csharp]": {
"editor.tabSize": 4
},
"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"javascript.referencesCodeLens.enabled": true,
"vetur.validation.script": false,
"vetur.validation.template": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
"vue-html",
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.rulers": [
80,
100
]
}
.eslintrc.js:
module.exports = {
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
node: true,
jest: true
},
globals: {
expect: true
},
extends: [
'prettier',
'plugin:vue/recommended', // /base, /essential, /strongly-recommended, /recommended
'plugin:prettier/recommended', // turns off all ESLINT rules that are unnecessary due to Prettier or might conflict with Prettier.
'eslint:recommended'
],
plugins: ['vue', 'prettier'],
rules: {
'vue/max-attributes-per-line': 'off',
'prettier/prettier': [ // customizing prettier rules (not many of them are customizable)
'error',
{
singleQuote: true,
semi: false,
tabWidth: 2
},
],
'no-console': 'off'
}
}
Without changing any settings, ESLint --fix does indeed format properly--breaking all my .vue template elements into many lines properly. So any ideas how I whip VS Code into shape? The above settings didn't help, but I am at a loss how as to even know what is interfering. Any ideas?
To emphasize, when I save in VS Code, a long HTML element will collapse to one line then break to two lines a half-second later, all from one save operation. I'm expecting it instead to break it up into many lines. It would be okay if it took several saves, but instead the first save shows this behavior as well as every subsequent save.
Short answer: I needed: "editor.formatOnSave": false, "javascript.format.enable": false.
I finally found the magical combination of settings, thanks to this thread from Wes Bos on Twitter. I was right in my suspicion that there seem to be multiple conflicting formatters. Though I'm not sure what they actually are, I was able to turn off all but eslint as follows:
In the VS Code settings, I need:
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true },
{ "language": "javascript", "autoFix": true },
{ "language": "javascriptreact", "autoFix": true }
]
In .eslintrc.js, then I can use the settings in my original post and then also change 'vue/max-attributes-per-line' as desired. Then VS Code's ESLint plugin will format code one step at a time on every save, much as kenjiru wrote. One last snag: HMR won't pick up these changes, so rebuild from scratch.
With 'vue/max-attributes-per-line': 'off' the rule is disabled so VSCode does not try to fix the long line on autosave. Other eslint fixes are applied, as expected.
With 'vue/max-attributes-per-line': 1 VSCode fixes only one error per save. This is a known limitation of vscode-eslint
vscode-eslint only does a single pass in order to keep to a minimum the amount of edits generated by the plugin. The goal is to keep as many markers (like break points) in the file as possible.
VSCode has a time limit of 1 second for all the plugins to compute the change set on save. If one of the plugins causes the other plugins to not run for 3 times in a row, it will be disabled.
eslint --fix runs all the rules in a loop until there are no more linting errors. I think it has a limit of 10 iterations maximum.
See these links for more details:
https://github.com/Microsoft/vscode-eslint/issues/154
I've created a minimal setup to demonstrate this issue:
https://github.com/kenjiru/vscode-eslint-onsave-issue
I know this is old but in case anyone should find this and not have success with the posted solutions, the fix for me was to add:
"editor.codeActionsOnSave": {
"source.fixAll": true
}
I did not need "editor.formatOnSave": true for some reason. I do not have Prettier installed - only ESLint - but this now performs any fixes automatically when I save.
This is the setup I ended up going with in VSC settings.json file.
Works perfectly for locally set up eslint disabling the default vetur settings (if the plugin is installed).
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"eslint.options": {
"extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
"html",
"javascript",
"vue"
],
I tried this things and it didn't worked.
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
but it at last i tried this. and worked
"diffEditor.wordWrap": "off",
I bumped into the same issue, and surprisingly found that prettier and vetur were conflicting. I had to disable vetur formatter and it now works as expected.
If you have this section in your editor's settings.json and you have prettier installed,
{
"[vue]": {
"editor.defaultFormatter": "octref.vetur",
},
}
chances are, these two formatters are conflicting and thus the unexpected behaviour.
A quick workaround is to comment it as below, or simply delete it permanently.
{
"[vue]": {
// "editor.defaultFormatter": "octref.vetur",
},
}
I've struggled through a similar problem. I tried the solution above but didn't work for me, unfortunately. I'm using eslint and Vetur, didn't install prettier plugin but configured it via eslint and enabled "eslint.autoFixOnSave": true. I finally got the correct autoformat on save by removing the following configuration in settings.json. Not sure why but it's working for me.
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
Will update this answer if I get other issues related to this.
I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.