I keep having a problem with ESLint and prettier. It happened several times now that they have conflicting rules and the autoformat on save of one will throw an error on the other.
My problem at the moment is this line, which has been formatted by ESLint:
<v-card outlined min-width="105" :style="{ backgroundColor: cCodeWaterTemp }">
Then prettier throws this error:
88:16 error Replace `·outlined·min-width="105"·:style="{·backgroundColor:·cCodeWaterTemp·}"` with `⏎··········outlined⏎··········min-width="105"⏎··········:style="{·backgroundColor:·cCodeWaterTemp·}"⏎········` prettier/prettier
Basically saying I should change it into this format
<v-card
outlined
min-width="105"
:style="{ backgroundColor: cCodeWaterTemp }"
>
Which ESLint will then again change on save. How can I configure them to have consistent, non conflicting rules? I went through a few tutorials and at the moment my configuration files look like this
Settings.json:
{
"window.zoomLevel": 0,
"vetur.validation.template": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"vetur.completion.scaffoldSnippetSources": {
"workspace": "",
"user": "",
"vetur": ""
},
"prettier.useTabs": true,
"prettier.tabWidth": 4,
"git.autofetch": true,
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
rules: {
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
$nuxt: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
],
}},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
],
}
and editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
}
Any help would be welcome!
Cheers
This is the best way for me.
This works in hot reload too.
In nuxt.config.js add
buildModules: [
...,
['#nuxtjs/eslint-module', {fix: true}]
],
In case someone is stumbling across this looking for an answer, I have figured it out by now. I read that the "extends" part inside eslint should be last so no rule in there gets overwritten. Further, I needed to teach eslint a few tricks regarding vue and prettier which results in this eslint file:
module.exports = {
root: true,
env: {
node: true,
browser: true,
},
rules: {
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
globals: {
$nuxt: true,
},
parserOptions: {
parser: 'babel-eslint',
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'prettier/vue',
'plugin:prettier/recommended',
'prettier',
'plugin:vue/base',
],
}
Now i just needed to tell the editor that he can correct code on save (.editorconfig):
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
And here we go. They play nicely for now. I found these pages to be a big help:
Style Guide to find what's wrong
Code page to enable the given set of rules in ESLint
Related
I've got a problem with my linter/prettier in VueJS. In every .vue file there is a parsing error (showing up at the <script> or <style> tag after the <template> ... </template>)
error Parsing error: Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag prettier/prettier
I tried configuring the .eslintrc but the error is still showing up
require('#rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
env: {
es6: true,
node: true
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'#vue/eslint-config-typescript',
'#vue/eslint-config-prettier',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '#typescript-eslint/parser',
sourceType: 'module',
},
rules: {
'vue/multi-word-component-names': 0,
},
}
Hope someone has an idea, cause it's driving me crazy...
I solved it by adding extends: [ 'vue', 'standard' ] to the .eslintrc so it now looks like this
require('#rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
env: { es6: true, node: true },
extends: [
'vue',
'standard',
'plugin:vue/vue3-essential',
'eslint:recommended',
'#vue/eslint-config-typescript',
'#vue/eslint-config-prettier',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '#typescript-eslint/parser',
sourceType: 'module',
},
rules: {
'vue/multi-word-component-names': 0,
},
}
ESLint: Delete ··⏎········(prettier/prettier)
Im trying add empty line between JSX elements like:
<First/>
// here emtpy line
<Second/>
default .eslintrc.js
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
},
},
],
};
default prettierrc.js
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
bracketSpacing: true,
singleQuote: true,
trailingComma: 'all',
};
i want to show unused values from vuex. For example i have script tag like this
export default {
name: 'TEST',
computed: {
...mapState('vuex/test', [
'value1',
'value2',
]),
},
};
Value1 used in template but value2 doesn't and eslint doesn't match this as error. Here is my eslint config
module.exports = {
root: true,
env: {
browser: true,
es6: true,
node: true,
},
extends: ['plugin:vue/recommended', 'airbnb-base'],
plugins: ['vue'],
parserOptions: {
parser: '#babel/eslint-parser',
},
rules: {
'import/prefer-default-export': 'off',
'linebreak-style': 0,
'import/no-cycle': 'off',
'no-console': 'warn',
'no-bitwise': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-param-reassign': [
'error',
{
props: true,
ignorePropertyModificationsFor: [
'store', // for vuex store
'state', // for vuex state
],
},
],
'vue/no-unused-properties': ['error', {
groups: ['props', 'data', 'computed', 'methods', 'setup'],
}],
},
}
How to show erros for mapState,mapGetters,mapActions and mapMutations?
I create a React Native project the version is 0.62.2
I change eslintrc.js as below
module.exports = {
parser:'babel-eslint',
env: {
browser: true,
es6: true,
},
extends: '#react-native-community',
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
... my other rules
"react-native/no-inline-styles": 1,
"prettier/prettier": ["error", {
"no-inline-styles": false
}],
},
};
I hope my style code like this {{ flex: 1, marginTop: 5 }} not {{flex:1,marginTop:5}}
But my warrning shows info:
(property) FlexStyle.marginTop?: React.ReactText
Inline style: { flex: 1, marginTop: 5 }eslint(react-native/no-inline-styles)
Replace `·flex:1,·marginTop:5·` with `flex:·1,·marginTop:·5`eslintprettier/prettier
I have no idea how to set inline styles space and how to fix the prettier problem.
the value should be 0, to set it to false. So your rules array should look like this:
rules: {
... my other rules
"react-native/no-inline-styles": 0,
"prettier/prettier": ["error", {
"no-inline-styles": false
}],
}
You can use disable rule functionality by ESLint
// eslint-disable-line react-native/no-inline-styles
For more info visit https://eslint.org/docs/user-guide/configuring.html#configuring-rules
It looks like your configuration is missing prettier in the plugins' array.
Make sure to correctly use eslint to run prettier by reading prettier's documentation.
Prettier has a rule for object literals spacing called bracket spacing, but note that it is set to true by default.
make change to file: .eslintrc.js
module.exports = {
root: true,
extends: '#react-native-community',
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
rules: {
'react-native/no-inline-styles': 0,
'prettier/prettier': 0,
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
},
},
],
};
I want to ignore eslint all 'style' tags in .vue files.
I have used #vue/prettier with eslint.
How to disable only 'style' tags in Vue template files?
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
jquery: true,
node: true
},
plugins: [
"vue"
],
extends: ["plugin:vue/essential", "#vue/prettier"],
rules: {
"prettier/prettier": "error",
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"new-cap": [
2,
{
newIsCap: false,
capIsNew: false
}
],
"no-useless-escape": 0
},
parserOptions: {
parser: "babel-eslint",
sourceType: "module"
},
};
prettier and vue just don't mix. It has been a huge undertaking to figure this out. I use VSCode and man does it ruin my workflow. I had an issue with the ctlf feature that was indiscriminate in the way it determined which lines needed it.
Try using Jon Gallants settings from here a link!
It totally worked for me!