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?
Related
I know this error is all over the place however I tried adding a tsconfig.json file to the parserServices.project already and that did not work.
Basically I have a yarn workspace project and my sub-package is giving this error. It has a local eslintrc.cjs file which again I set the parserServices.project path to './tsconfig.eslint.config' which does exist. Also the rule #typescript-eslint/await-thenable is not in this sub-package it is in a parent. This is my eslintrc.cjs contents.
module.exports = {
plugins: [
'prettier'
],
extends: ['eslint:recommended', 'prettier'],
parser: '#babel/eslint-parser',
parserOptions: {
ecmaVersion: 11,
requireConfigFile: false,
sourceType: 'module',
ecmaFeatures: {
jsx: true
},
project: './tsconfig.eslint.json',
},
env: {
es6: true,
browser: true,
node: true,
jest: true
},
rules: {
'no-debugger': 2,
'no-alert': 2,
'no-await-in-loop': 0,
'no-prototype-builtins': 0,
'no-return-assign': ['error', 'except-parens'],
'no-restricted-syntax': [
2,
'ForInStatement',
'LabeledStatement',
'WithStatement'
],
'no-unused-vars': [
0,
{
ignoreSiblings: true,
argsIgnorePattern: 'React|res|next|^_'
}
],
'prefer-const': [
'error',
{
destructuring: 'all'
}
],
'no-unused-expressions': [
2,
{
allowTaggedTemplates: true
}
],
'no-console': 1,
'comma-dangle': 2,
'jsx-quotes': [2, 'prefer-double'],
'linebreak-style': ['error', 'unix'],
quotes: [
2,
'single',
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
'prettier/prettier': [
'error',
{
trailingComma: 'none',
singleQuote: true,
printWidth: 80
}
]
}
};
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 am trying to create a production build with the following configureWebpack but Terser doesnt run during build.
Code is not minimized or uglified. Ialso tried hidden-source-map
Using "terser-webpack-plugin": "^5.3.3" with #vue/cli#5.0.7
isProd is correctly set to true.
const TerserPlugin = require('terser-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
publicPath: '/',
devServer: {
host: 'staging-beta.myDomain.com',
port: 9000,
allowedHosts: 'all',
},
transpileDependencies: ['vuetify'],
chainWebpack: (config) => {
// reducted code
},
configureWebpack: {
devtool: 'source-map',
optimization: {
minimize: isProd,
minimizer: isProd
? [
new TerserPlugin({
minify: TerserPlugin.uglifyJsMinify,
terserOptions: {
compress: {
drop_console: true,
},
output: {
comments: false,
},
},
}),
]
: [],
},
},
};
The correct setup is:
module.exports = defineConfig({
terser: {
minify: 'uglifyJs',
terserOptions: {
compress: {
drop_console: true,
},
},
},
})
You also need to npm install uglify-js
comments under output is deprecated.
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
I am following the steps in this tutorial :
https://www.youtube.com/watch?v=z6hQqgvGI4Y
using VSCode (version 1.22.2) as my editor
I am running the following version
==> vue --version
2.9.3
of Vue / vue-cli installed from npm using the steps outlined here :
npm install --global vue-cli
My VSCode workspace settings (User settings) are as follows :
{
"workbench.colorTheme": "Visual Studio Dark",
"window.zoomLevel": 1,
"workbench.statusBar.visible": true,
"workbench.startupEditor": "newUntitledFile",
// Format a file on save. A formatter must be available, the file must not be auto-saved, and editor must not be shutting down.
// "editor.formatOnSave": true,
"eslint.autoFixOnSave": true,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
// Use 'prettier-eslint' instead of 'prettier'. Other settings will only be fallbacks in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": false,
"editor.insertSpaces": true,
"[javascript]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"[vue]": {
"editor.tabSize": 2,
"editor.insertSpaces": true
},
"eslint.options": {
"extensions": [".html", ".js", ".vue", ".jsx"]
},
"eslint.validate": [
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": false
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
]
}
I have the Vetur tooling for VSCode installed :
https://github.com/vuejs/vetur
I have the following files :
src/components/HomeCentral.vue
<template>
<div class="homecentral">
<input type="text" v-model="title"><br/>
<h1>{{title}}</h1>
<p v-if="showName">{{user.first_name}}</p>
<p v-else>Nobody</p>
<ul>
<li v-for="item in items" :key="item.id">{{item.title}}</li>
</ul>
<button v-on:click="greet('Hello World')">Say Greeting</button>
</div>
</template>
<script>
export default {
name: 'HomeCentral',
data() {
return {
title: 'Welcome',
user: {
first_name: 'John',
last_name: 'Doe',
},
showName: true,
items: [
{ title: 'Item One' },
{ title: 'Item Two' },
{ title: 'Item Three' },
],
};
},
methods: {
greet: function (greeting) {
alert(greeting);
},
},
};
</script>
<style scoped>
</style>
src/App.vue
<template>
<div id="app">
<home-central></home-central>
</div>
</template>
<script>
import HomeCentral from './components/HomeCentral';
export default {
name: 'App',
components: {
HomeCentral,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HomeCentral from '../components/HomeCentral';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HomeCentral',
component: HomeCentral,
},
],
});
My .eslintrc looks as follows :
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
node: true,
"es6": false
},
extends: 'airbnb-base',
// required to lint *.vue files
plugins: [
'html',
'vue'
],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
// disallow reassignment of function parameters
// disallow parameter object manipulation except for specific exclusions
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
'acc', // for reduce accumulators
'e' // for e.returnvalue
]
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
My .editorconfig looks like this :
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
But when I run
==> npm run dev
I get the following output :
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
WARNING Compiled with 1 warnings 3:01:35 PM
⚠ http://eslint.org/docs/rules/func-names Unexpected unnamed method 'greet'
src/components/HomeCentral.vue:33:12
greet: function (greeting) {
^
⚠ http://eslint.org/docs/rules/no-alert Unexpected alert
src/components/HomeCentral.vue:34:7
alert(greeting);
^
✘ http://eslint.org/docs/rules/object-shorthand Expected method shorthand
src/components/HomeCentral.vue:33:5
greet: function (greeting) {
^
✘ 3 problems (1 error, 2 warnings)
Errors:
1 http://eslint.org/docs/rules/object-shorthand
Warnings:
1 http://eslint.org/docs/rules/no-alert
1 http://eslint.org/docs/rules/func-names
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
Why is ESlint complaining about "Expected method shorthand" as an error and pointing to the following ES6 linting rule :
http://eslint.org/docs/rules/object-shorthand
Does 2.9.3 version of Vue use ES6 ?
How to silence the VScode editor from linting this semantically correct Vue code :
Fixed by following PeterVojtek answer at the following :
https://github.com/vuejs-templates/webpack/issues/73
Basically changed the following section on build/webpack.base.conf.js
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
to
const createLintingRule = () => ({
})
Also removed 'html' from plugins sections of .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
node: true,
"es6": false
},
extends: [
'airbnb-base',
],
// required to lint *.vue files
plugins: [
'vue',
],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js'
}
}
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
// disallow reassignment of function parameters
// disallow parameter object manipulation except for specific exclusions
'no-param-reassign': ['error', {
props: true,
ignorePropertyModificationsFor: [
'state', // for vuex state
'acc', // for reduce accumulators
'e' // for e.returnvalue
]
}],
// allow optionalDependencies
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
}],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
TSlint error/warning in callback function in 'Angular 10', VS code version 1.53.2 -
Solution -
doc.html(htmlData.innerHTML, {
callback(data: any): void {
data.save('angular-demo.pdf');
},
x: 10,
y: 10
});
package.json -
{
"dependencies": {
"#angular/core": "~10.1.3",
...
},
"devDependencies": {
"#angular/cli": "~10.1.3",
"#types/node": "^12.11.1",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2",
...
}
}