Parcel 构建 VueJS 应用 03：ESLint

首先确保VS Code 安装了 Vetur 和 ESlint 插件。

ESLint

首先全局安装 ESLint

1yarn global add eslint@latest
2

运行：

1eslint --init
2
3? How would you like to configure ESLint? Use a popular style guide
4? Which style guide do you want to follow? Standard (https://github.com/standard/standard)
5? What format do you want your config file to be in? JavaScript
6

参考上方选择，会安装以下依赖：

• eslint-config-standard
• eslint
• eslint-plugin-import
• eslint-plugin-node
• eslint-plugin-promise
• eslint-plugin-standard

同时在项目的根目录会生成以下文件 .eslintrc.js

1module.exports = {
2    "extends": "standard"
3};
4

表明我们使用的规则是 standard 规范所定义的规则。

配置

1. 在项目 package.json 文件中的 scripts 中增加一行：

   "lint": "eslint --ext .js,.vue src"

运行：

1yarn lint
2

这时就会有报错的提示了。

为了在 .vue 文件中出错的地方显示提示， 在 VS Code 的设置文件 setting.json 中添加如下规则：

1"eslint.validate": [
2    "javascript",
3    "javascriptreact",
4    {
5      "language": "vue",
6      "autoFix": true
7    }
8  ],
9

ESlint 对 .vue 文件中的标签报解析错误，需要安装 eslint-plugin-vue@next 插件。

1yarn add -D eslint-plugin-vue@next
2

同时在. eslintrc.js 中添加使用 vue 插件的扩展。

1// .eslintrc.js
2module.exports = {
3    "extends": [
4           "standard",
5           "plugin:vue/base"
6      ]
7}
8

这样，就可以对.vue文件提供实时检查的功能了。

1. 对于多余的逗号这种错误，可以在保存的时候让 eslint 插件自动修复。 更改 VS Code 中的设置，添加如下规则：

   {"eslint.autoFixOnSave": true}

我们注意到这样一条错误：

1// main.js
2...
3new Vue({
4  el: '#app',
5  render: h => h(App)
6})
7

发现将其改为下面的方式就解决了：

1// main.js
2...
3new Vue({
4  render: h => h(App)
5}).$mount('#app');
6