Vue-CLI with 4 space identation - vuejs2

I am totally new to Vue.
I want to use the CLI and I want to have 4 space indentation (with typescript and vuex). But after 24 hours of struggling I am no closer to getting anything working. If it is impossible let me know too.
I thought that tslint was the way to go, but could not find a solution. So I tried eslint and added this to package.json
"devDependencies": {
"#vue/cli-plugin-eslint": "^3.0.4",
"#vue/cli-plugin-pwa": "^3.0.4",
"#vue/cli-plugin-typescript": "^3.0.4",
"#vue/cli-service": "^3.0.4",
"#vue/eslint-config-prettier": "^3.0.4",
"#vue/eslint-config-typescript": "^3.0.4",
"eslint": "^5.6.1",
"eslint-plugin-vue": "^5.0.0-beta.3", // <------------------
"typescript": "^3.0.0",
"vue-template-compiler": "^2.5.17"
}
Then is eslintrc I have
module.exports = {
root: true,
env: {
node: true
},
extends: ["plugin:vue/essential", "#vue/prettier", "#vue/typescript"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"vue/script-indent": ["error", 4, { baseIndent: 1 }],
indent: ["error", 4]
},
parserOptions: {
parser: "typescript-eslint-parser"
}
};
then when I run
$ npx eslint --fix *.js
=============
WARNING: You are currently running a version of TypeScript which is not officially supported by typescript-eslint-parser.
You may find that it works just fine, or you may not.
SUPPORTED TYPESCRIPT VERSIONS: ~3.0.1
YOUR TYPESCRIPT VERSION: 3.1.1
Please only submit bug reports when using the officially supported version.
=============
/Users/x/code/sync/vue/restos2/postcss.config.js
2:1 error Expected indentation of 4 spaces but found 2 indent
3:1 error Expected indentation of 8 spaces but found 4 indent
4:1 error Expected indentation of 4 spaces but found 2 indent
✖ 3 problems (3 errors, 0 warnings)
3 errors and 0 warnings potentially fixable with the `--fix` option.
but the problem is that no files ever get changed.

As described in the tslint doc, the indent rule doesnt fix wrong amount of indentation characters, it only fixes the character type, this means that it can convert tabs to spaces and vice versa, but it doesnt fix 4 spaces to 2 spaces
NOTE: auto-fixing will only convert invalid indent whitespace to the desired type, it will not fix invalid whitespace sizes.
https://palantir.github.io/tslint/rules/indent/
So yeah, you'd have to go with eslint. I dont see you full eslintrc file, but I think that the main problem may be this line: indent: ["error", 4]. Try removing that.
This eslint config is working for me:
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/typescript"
],
"rules": {
"vue/script-indent": ["error",2,{"baseIndent": 1}]
},
"parserOptions": {
"parser": "typescript-eslint-parser"
}
}
And run with npm run lint

Related

Getting Postcss warning without using it

I'm getting this Postcss warning:
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. (repeated 19 times)
But I'm not using it. It's very annoying because, as you can see, the message is repeated several times.
I know why I'm getting the error (I don't have a Postcss config file or any plugins, stringifiers, etc, set) but I don't know why is Postcss installed in first place.
This is my package.json
{
"name": "vip-english-website",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#dzangolab/vue-accordion": "^1.2.0",
"#nuxtjs/axios": "^5.13.6",
"express": "^4.17.1",
"googleapis": "^91.0.0",
"vue-carousel": "^0.18.0",
"vue-check-view": "^0.3.0",
"vue-gapi": "^2.0.0",
"vue-js-modal": "^2.0.1",
"vuelidate": "^0.7.6"
},
"devDependencies": {
"#nuxtjs/google-fonts": "^1.3.0",
"core-js": "^3.19.1",
"nuxt": "^2.15.8",
"nuxt-windicss": "^2.0.12"
}
}
Do anyone have any idea?
Is been 3 days of troubleshooting this error, finally the solution in the github discussion works for me.
I'm using the following dependencies
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuelidate": "^0.7.7",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
"axios": "^0.27.2",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
Github Issue - Allow to disable "You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js
In nuxt.config.js, under the build options, add the following as shown below. That worked for me.
build: {
postcss: null,
}
Hope it helps
PostCSS is a dependency of Nuxt. You can use npm ls {package_name} command in your project directory, to view package dependencies tree.
Issue was fixed in recent PostCSS release: https://github.com/postcss/postcss/issues/1375 , but Nuxt probably will update it only on next big release (v3).
just add to nuxt.config.js
build: {
postcss: null,
loaders: {
vue: {
prettify: false
}
}
}
I'm using nuxt 2.15.8 & having the same issue.
The following command & config will supress the warning.
npm i -D #nuxt/postcss8 #nuxtjs/style-resources
In nuxt.config.js, edit/add:
buildModules: [
'#nuxtjs/style-resources',
'#nuxt/postcss8',
],
build: {
postcss: {
plugins: {
},
preset: {
}
}
}
In my case using Nuxt, I not only needed to add the following code to the Nuxt config to disable the warning, but also to actually make the autoprefixer work! (even if the autoprefixer comes by default in Nuxt and a .browserlistrc file exists)
build: {
postcss: {
preset: {
autoprefixer: {
overrideBrowserslist: ['last 3 versions', '> 1%']
}
}
}
}
After a fresh Nuxt install I had the warning, and playing around with newer CSS rules, I noticed that without the above config, filter: grayscale(100%); would not get autoprefixed.
Editing the .browserlistrc file did not help.
For me it solved using npm install inside the project that presented these warnings. Maybe it works for someone else

Vue 2 - ESLint + Standard + Prettier

How do I create a Vue 2 project that uses ESLint + StandardJS + Prettier?
StandardJS's rules should naturally take precedence over Prettier's.
vue create only provides the following options:
ESLint + Standard
ESLint + Prettier
I tried 2 things:
I mixed the eslint configurations of both of the above options. It resulted in a dependency hell, and once that was solved it didn't really work as expected.
I added the prettier-standard package to my eslintrc.js, it didn't work as expected either. It's worth mentioning that prettier-standard works well when manually executing it from the command line.
I'm of course looking to set this up at the project config level and not at the IDE level.
Can you try this repo I've just created? Looks like it's working great from what I've tested.
https://github.com/kissu/so-eslint-standard-prettier-config
Notes
I created 2 projects and dumped the configuration of the standard one into the Prettier one, the changes can be seen in this commit
CLI's current version of #vue/eslint-config-standard is throwing an error (Environment key "es2021" is unknown) because it requires ESlint 7 to work, as shown in this changelog
bumping ESlint to the latest version 7.29.0, fixed the issue
to check your project's current version of ESlint, you can run npx eslint --version
of course, you need to have the ESlint extension enabled and Prettier one disabled (if using VScode), otherwise it may conflict
I've tried to remove #vue/prettier from
extends: ['plugin:vue/essential', 'eslint:recommended', '#vue/standard', '#vue/prettier']
and see if it's successfully removes any ; and it does!
The errors are indeed coming from ESlint (if we do remove #vue/prettier), and they're fixed by ESlint only upon save (after an ESlint server + VScode restart)!
Putting Prettier back works fine of course.
Luckly, I had a new PC, hence had the opportunity to try a whole fresh config with VScode.
I had to install ESlint only and have those settings into my settings.json
{
"editor.codeActionsOnSave": {
"source.organizeImports": false,
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
The formatting works perfectly and nothing more is required.
I have eslint 7.8.1 with Vue Prettier on and i don't have any problem, maybe the version of eslint that you have is not compatible with Prettier or maybe your eslint have some errors?
In each way i will put my eslint configuration and maybe it will help you!
module.exports = {
env: {
'browser': true,
'es6': true,
'node': true
},
parserOptions: {
'parser': 'babel-eslint'
},
extends: [
'#vue/standard',
'plugin:vue/recommended'
],
rules: {
"vue/html-indent": ["error", 4, {
"attribute": 1,
"closeBracket": 0,
"switchCase": 0,
"ignores": []
}],
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
'indent': ['error', 4],
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
'vue/script-indent': [
'error',
4,
{ 'baseIndent': 1 }
],
'space-before-function-paren': ['error', 'never'],
'semi': [2, "never"],
'vue/singleline-html-element-content-newline': 'off',
'vue/multiline-html-element-content-newline': 'off'
},
overrides: [
{
'files': ['*.vue'],
'rules': {
'indent': 'off'
}
}
]
}
Also maybe you have forgot some of the devDependecies on package.json, those are mine
"eslint": "^7.8.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2"
Hope that those will help you !

Eslint no-extra-parens rule does not work

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

Definition for rule '#typescript-eslint/no-shadow' was not found

Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0

Grunt build failing - ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I have gone through many posts on github and stackoverflow. I have the following dev dependencies in my package.json for the es6 to es5 transpilation.
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babelify": "^8.0.0",
"browserify": "^15.0.0",
"grunt-browserify": "^5.2.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0"
I have setup a grunt task to compile my es6 file to es5 using babelify as transformer and browserify.
browserify: {
dist: {
src: [‘src/component/myes6.js’],
dest: ‘dist/src/component/myes5.js’,
options: {
transform: [
['babelify', {presets: [["es2015", { loose: true, modules: false }]]}]
],
browserifyOptions: {
debug: true
}
}
}
}
My es6 js file is importing a node module which is es6 js file and exported as function. I tried to follow many suggestion from various forums and looked through the babel/babelify/grunt-browserify documentation but could not land on a concrete conclusion.
Earlier I thought, it could be versions issue but I am now using all babel 6 version and latest browserify/grunt-browserify etc. But still, I am seeing the following error:
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
Any help or pointers will be appreciated.
I've solved it installing esmify plugin npm install babel-plugin-esmify browser-resolve --save-dev.
browserify: {
dist: {
src: ['src/component/myes6.js'],
dest: 'dist/src/component/myes5.js',
options: {
plugin: [
[require('esmify')]
],
transform: [
['babelify', {
presets: [["es2015", { loose: true, modules: false }]]
}
]
}
}
},
I haven't tried running it, but the square brackets around your browserify dist/src shouldn't be there. Try running this file without them.