Vue-cli creates an error or warning caused by esLint verification when creating a project
After creating a project, the console is yellow
But it does not affect the code execution
But it looks very unhappy
I searched for this question online, and remembered that the esLint verification tool was installed when initializing the project.
Well, I've seen many ways to do this
1. Because you set eslint, if you don't want to have standardized js code, you can re-initialize and turn off eslint.
Use ESLint to lint your code? (Y/n) Choose no in this step
There are configurations in bulk/ as follows:
module: {
rules: [
...( ? [createLintingRule()] : []),Click in and find the configuration in config/
useEslint: true, // Just change to false.
2. The universal method is to write it on the first line in the JS file that reports an error.
/* eslint-disable */ Use /* eslint-disable */ to ignore all warnings in a file.
Simple, crude and efficient
But in mind, since people say I was wrong, it will definitely be bad. I have to change this good awareness
I think, you should face the mistakes and be brave enough to correct them
so I have made changes to all the error messages one by one, and it turns out to be knowledgeable. Hahaha, then I will write according to his specifications. Wouldn't I be enenenhahaha
What kind of dreams am I having again [○･Д´･○]
Go to the topic and sort out the error information you encountered
：Strings must use single quote
Strings must be enclosed in single quotes
indentation of 2 spaces but found 4
eslint doesn't like tab indentation, just use two spaces to indentation. OK, I've started to change it now~
If you really can't change it, you can ↓↓
Modify the eslint configuration file.
rules: {
...
// Indent // 'indent': 2,
// 'indent': [2, 2, {"SwitchCase": 1}],
"indent": [1, 2],
...
}space before value for key 'components’
This is to add a space before the property value, which is after the colon, habitually add a space to avoid the error prompt of this song~
required at end of file but not found
The last </style> of a single file component needs to be replaced with one line, and there can only be one line. If there are too many, it will also report an error.
I won't list the others, but there are still some to pay attention to
{}，
{}
↓
{}, {
}
Note: Add a space after the comma
OK, the above are some of my little experiences on this specification, and I will add them later if I encounter it~
eslint syntax restricts project error resolution
I found a practical project from the Internet. After npm install, I started the project. There were so many warnings and errors below, and I was confused:
Windows PowerShell
all rights reserved (C) Microsoft Corporation。All rights reserved。
PS F:\-master> npm run dev
> @2.0.0 dev F:\-master
> webpack-dev-server --open --inline --progress --config build/
95% emitting
WARNING Compiled with 2 warnings 15:04:08
✘ /docs/rules/indent Expected indentation of 0 spaces but found 1
src\:15:1
/*Introduce VueAwesomeSwiper carousel plug-in globally*/
^
✘ /docs/rules/spaced-comment Expected exception block, space or tab after '/*' in comment
src\:15:2
/*Introduce VueAwesomeSwiper carousel plug-in globally*/
^
✘ /docs/rules/spaced-comment Expected space or tab before '*/' in comment
src\:15:2
/*Introduce VueAwesomeSwiper carousel plug-in globally*/
^
✘ /docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:17:36
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/spaced-comment Expected space or tab after '//' in comment
src\:17:37
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\:18:1
^
✘ /docs/rules/semi Extra semicolon
src\:20:47
import AppHead from '@/components/public/Head';
^
✘ /docs/rules/semi Extra semicolon
src\:21:47
import AppMenu from '@/components/public/Menu';
^
✘ /docs/rules/semi Extra semicolon
src\:22:45
import AppNav from '@/components/public/Nav';
^
✘ /docs/rules/semi Extra semicolon
src\:23:47
import AppFoot from '@/components/public/Foot';
^
✘ 12 problems (12 errors, 0 warnings)
Errors:
6 /docs/rules/semi
3 /docs/rules/spaced-comment
1 /docs/rules/no-multiple-empty-lines
1 /docs/rules/no-unused-vars
1 /docs/rules/indent
✘ /docs/rules/semi Extra semicolon
src\components\:40:36
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\:40:37
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/semi Extra semicolon
src\components\:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\components\:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
✘ 4 problems (4 errors, 0 warnings)
Errors:
3 /docs/rules/semi
1 /docs/rules/spaced-comment
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.
WAIT Compiling... 15:05:01
95% emitting
WARNING Compiled with 2 warnings 15:05:02
✘ /docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:17:36
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/spaced-comment Expected space or tab after '//' in comment
src\:17:37
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\:18:1
^
✘ /docs/rules/semi Extra semicolon
src\:20:47
import AppHead from '@/components/public/Head';
^
✘ /docs/rules/semi Extra semicolon
src\:21:47
import AppMenu from '@/components/public/Menu';
^
✘ /docs/rules/semi Extra semicolon
src\:22:45
import AppNav from '@/components/public/Nav';
^
✘ /docs/rules/semi Extra semicolon
src\:23:47
import AppFoot from '@/components/public/Foot';
^
✘ 9 problems (9 errors, 0 warnings)
Errors:
6 /docs/rules/semi
1 /docs/rules/no-multiple-empty-lines
1 /docs/rules/spaced-comment
1 /docs/rules/no-unused-vars
✘ /docs/rules/semi Extra semicolon
src\components\:40:36
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\:40:37
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/semi Extra semicolon
src\components\:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\components\:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
✘ 4 problems (4 errors, 0 warnings)
Errors:
3 /docs/rules/semi
1 /docs/rules/spaced-comment
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.
WAIT Compiling... 15:05:05
95% emitting
WARNING Compiled with 2 warnings 15:05:06
✘ /docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:17:36
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/spaced-comment Expected space or tab after '//' in comment
src\:17:37
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\:18:1
^
✘ /docs/rules/semi Extra semicolon
src\:20:47
import AppHead from '@/components/public/Head';
^
✘ /docs/rules/semi Extra semicolon
src\:21:47
import AppMenu from '@/components/public/Menu';
^
✘ /docs/rules/semi Extra semicolon
src\:22:45
import AppNav from '@/components/public/Nav';
^
✘ /docs/rules/semi Extra semicolon
src\:23:47
import AppFoot from '@/components/public/Foot';
^
✘ 9 problems (9 errors, 0 warnings)
Errors:
6 /docs/rules/semi
1 /docs/rules/no-multiple-empty-lines
1 /docs/rules/spaced-comment
1 /docs/rules/no-unused-vars
✘ /docs/rules/semi Extra semicolon
src\components\:40:36
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\:40:37
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/semi Extra semicolon
src\components\:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\components\:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
✘ 4 problems (4 errors, 0 warnings)
Errors:
3 /docs/rules/semi
1 /docs/rules/spaced-comment
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.
WAIT Compiling... 15:05:07
95% emitting
WARNING Compiled with 2 warnings 15:05:08
✘ /docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:17:36
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/spaced-comment Expected space or tab after '//' in comment
src\:17:37
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\:18:1
^
✘ /docs/rules/semi Extra semicolon
src\:20:47
import AppHead from '@/components/public/Head';
^
✘ /docs/rules/semi Extra semicolon
src\:21:47
import AppMenu from '@/components/public/Menu';
^
✘ /docs/rules/semi Extra semicolon
src\:22:45
import AppNav from '@/components/public/Nav';
^
✘ /docs/rules/semi Extra semicolon
src\:23:47
import AppFoot from '@/components/public/Foot';
^
✘ 9 problems (9 errors, 0 warnings)
Errors:
6 /docs/rules/semi
1 /docs/rules/no-multiple-empty-lines
1 /docs/rules/spaced-comment
1 /docs/rules/no-unused-vars
✘ /docs/rules/semi Extra semicolon
src\components\:40:36
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\:40:37
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/semi Extra semicolon
src\components\:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\components\:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
✘ 4 problems (4 errors, 0 warnings)
Errors:
3 /docs/rules/semi
1 /docs/rules/spaced-comment
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.
WAIT Compiling... 15:05:09
95% emitting
WARNING Compiled with 2 warnings 15:05:09
✘ /docs/rules/no-unused-vars 'VueAwesomeSwiper' is defined but never used
src\:16:8
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:16:50
import VueAwesomeSwiper from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\:17:36
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/spaced-comment Expected space or tab after '//' in comment
src\:17:37
import 'swiper/dist/css/';// Pay attention to the specific view here to see whether the version used needs to introduce styles and specific locations. ^
✘ /docs/rules/no-multiple-empty-lines More than 1 blank line not allowed
src\:18:1
^
✘ /docs/rules/semi Extra semicolon
src\:20:47
import AppHead from '@/components/public/Head';
^
✘ /docs/rules/semi Extra semicolon
src\:21:47
import AppMenu from '@/components/public/Menu';
^
✘ /docs/rules/semi Extra semicolon
src\:22:45
import AppNav from '@/components/public/Nav';
^
✘ /docs/rules/semi Extra semicolon
src\:23:47
import AppFoot from '@/components/public/Foot';
^
✘ 9 problems (9 errors, 0 warnings)
Errors:
6 /docs/rules/semi
1 /docs/rules/no-multiple-empty-lines
1 /docs/rules/spaced-comment
1 /docs/rules/no-unused-vars
✘ /docs/rules/semi Extra semicolon
src\components\:40:36
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/spaced-comment Expected space or tab after '///' in comment
src\components\:40:37
import 'swiper/dist/css/';Here we pay attention to whether the version used needs to introduce styles，And the specific location。
^
✘ /docs/rules/semi Extra semicolon
src\components\:41:57
import { swiper, swiperSlide } from 'vue-awesome-swiper';
^
✘ /docs/rules/semi Extra semicolon
src\components\:43:58
import { mapState, mapMutations, mapActions } from 'vuex';
^
✘ 4 problems (4 errors, 0 warnings)
Errors:
3 /docs/rules/semi
1 /docs/rules/spaced-comment
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.After Baidu query, it turns out that eslint is a syntax checking tool, but the restrictions are very strict. Many spaces in my vue file will cause red lines (the red lines can be closed prompts). Although it can be closed, it will always jump out during compilation, so it is best to be closed.
Close method: In the build/file, comment or delete: module->rules about eslint rules:
module: {
rules: [
//...( ? [createLintingRule()] : []), // Comment or delete {
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
...
}
]
}Then run npm run dev or build command npm run build again.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.