情景再现
我使用了以下命令运行 Vue 项目之后:
npm start
#或者
npm run dev
eslint 会报 Do not use 'new' for side effects
这个 warning,完整 warning 信息如下:
14% building modules 39/40 modules 1 active ...er@0.28.11@css-loader\lib\css-ba 95% emitting WARNING Compiled with 1 warnings上午6:27:53
✘ http://eslint.org/docs/rules/no-new Do not use 'new' for side effects
src\main.js:7:1
new Vue({
^
✘ http://eslint.org/docs/rules/no-multiple-empty-lines Too many blank lines at the end of file. Max of 0 allowed
src\main.js:11:1
^
✘ 2 problems (2 errors, 0 warnings)
Errors:
1 http://eslint.org/docs/rules/no-new
1 http://eslint.org/docs/rules/no-multiple-empty-lines
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.
虽然不影响项目的运行,但是能解决的话还是解决一下比较好。
我写的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
解决方法
方法一
定义一个变量 xxx (可为任意值)接收新创建的 Vue
let xxx = new Vue({
el: '#app',
render: h => h(App),
router
})
Vue.use({
xxx
})
改好后的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
let vue = new Vue({
el: '#app',
render: h => h(App)
})
Vue.use({
vue
})
注意:文件的末尾需要有空的一行,否则 eslint 会提示 Newline required at end of file but not found
方法二
在 new Vue 的上方添加一行注释,让 eslint 忽略文件中所有的 warnings
/* eslint-disable */
改好后的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
/* eslint-disable */
new Vue({
el: '#app',
render: h => h(App)
})
方法三
在 new Vue 的上方添加一行注释,让 eslint 忽略文件中所有的 “no-new”
/* eslint-disable no-new */
改好后的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
方法四
在 new Vue 的当前行添加一行注释,让 eslint 忽略文件中当前行的 warnings
some code // eslint-disable-line
改好后的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
new Vue({ // eslint-disable-line
el: '#app',
render: h => h(App)
})
方法五
在 new Vue 的当前行的上一行添加一行注释,让 eslint 忽略文件中下一行的 warnings
// eslint-disable-next-line
some code
改好后的 main.js 代码如下:
import Vue from 'vue'
import App from './App.vue'
// eslint-disable-next-line
new Vue({
el: '#app',
render: h => h(App)
})
解决问题后的运行结果
$ npm start
> xxx@1.0.0 start
> npm run dev
> xxx@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 0/1 modules 1 active ... webpack/hot/dev-server ./src/main
...
95% emitting DONE Compiled successfully in 9715ms上午6:53:04
I Your application is running here: http://localhost:8080