Do not use ‘new‘ for side effects的五种解决方法

情景再现

我使用了以下命令运行 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