-
-
Notifications
You must be signed in to change notification settings - Fork 590
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vetur Ignores .eslintrc settings when formatOnSave is true #764
Comments
Looks like I found a config to get this working. If I add the below configuration to VS Code it works although it seems a little glitchy. For example, if in addition to the config below, I also set Here's the VSCode config that makes it work:
|
facing same issue |
Thanks @jmcooper, your config did the trick. I was having the same issue using |
Facing this issue, to add to it the glitchy double format seems to be a little random. Some times it runs out of order and the double brackets are left. A quick second save fixes it. |
After solving the first issue with @jmcooper solution (thanks!), I fixed the flashing double quotes with the following: According to Vetur's documentation you can disable the formatter with the following setting:
This seems to solve the issue for me. Not yet sure what benefits of Vetur, if any, I'm losing by doing this. Btw, using the vue cli 3 configuration with airbnb. |
@joancc ahh this has solved it for me at-least until i work out what i'm missing out on. Thankyou |
I solved this by adding the following to the default value for "prettier": {
"singleQuote": true,
"trailingComma": "all"
} So it looks like this: "vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline",
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
},
"prettier": {
"singleQuote": true,
"trailingComma": "all"
}
} |
Thanks @jeffhube, it's work! |
This depends on what formatter you are using:
I suggest that you don't rely on ESLint autofix, if you are using Autoformat fixes your JS code, but also messes up template code: Whereas if you use Does that make sense? I think it's mostly a documentation issue. I'll update the docs. |
The Eslint plugin doesn't support format on paste. The vscode/vetur Formatter does. |
I've disabled the eslint format on save, and enabled Vetur's with the Is this supposed to be working? "eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/prettier"
],
"rules": {
"prettier/prettier": [
"error",
{
"#": "prettier config in here :)",
"singleQuote": true,
"semi": false,
"trailingComma": "es5",
"useTabs": true,
"bracketSpacing": false
}
]
},
"parserOptions": {
"parser": "babel-eslint"
}
}, |
@franciscolourenco Do you have a sample generated from vue-cli or forked from https://github.com/octref/veturpack? |
Oh I see you have ESLint settings from package.json from #1144. No we don't support that. |
@octref do you support |
The following config works for me to get formatter + ESLint + AirBnb config working: VSCode workspace settings (settings.json): {
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"editor.formatOnSave": true,
"eslint.runtime": "node",
"eslint.autoFixOnSave": true,
"vetur.format.defaultFormatter.js": "none",
"prettier.eslintIntegration": true
} With the following .eslintrc.js file: module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/essential', '@vue/airbnb'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'import/no-unresolved': 'off', // Suppress errors caused by import '@/...'
'max-len': 'off', // Allow lines longer than 100 characters
'no-param-reassign': [
'error', // Allow param reassigns required by Vuex
{
props: true,
ignorePropertyModificationsFor: [
'state',
'acc',
'e',
'ctx',
'req',
'request',
'res',
'response',
'$scope',
],
},
],
},
plugins: ['vue'],
parserOptions: {
parser: 'babel-eslint',
},
}; The With this config, although ESLint autoFixOnSave is turned on, it doesn't mess up the Vue template markup. #1038 looks related. |
With |
I can reproduce this. Please reopen this issue or have a look at my new issue #1942 |
I figured out how to get Vetur auto-formatting to work with the Airbnb ESLint config. It's pretty difficult to write down all the details so I made a video going over them: Vue Setup Guide in VS Code with Vetur and the Airbnb ESLint Config TL;DW
|
Info
Problem
When
"editor.formatOnSave"
is set totrue
in the VS Code settings, Vetur does not respect the settings in.eslintrc
.Reproducible Case
3.0.0-beta.6
) to create a new project:vue create new-project
Manually select features
Linter / Formatter
ESLint + Airbnb config
Lint on save
In dedicated config files
The text was updated successfully, but these errors were encountered: