YOU'VE MADE A BRAVE DECISION, WELCOME.

每一个不曾起舞的日子都是对生命的辜负。

eslint对.vue文件中的template和script进行检查并修复

项目地址:https://github.com/labnize/vue-vuex-router-element-webpack

安装eslint-plugin-vue

1
npm install --save-dev eslint eslint-plugin-vue@3.12

亲测[email protected]版本存在问题,所以此处选择3.12版本。

注意:eslint-plugin-vue要求ESlint >=3.18.0 & <= 4.3.0

插件地址:https://github.com/vuejs/eslint-plugin-vue

此项目因airbnb-base版本要求eslint为3.19.0或4.5.0,所以选择了[email protected]

配置.eslintrc

1
extends: ['plugin:vue/recommended', 'airbnb-base']

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
<div id="app">
<layout v-bind=""></layout>
</div>
</template>
<script>
import Layout from './components/layout';
export default {
name: 'app' ,
components: {
Layout
}
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>

使用命令行进行eslint检查

1
node_modules/.bin/eslint src/app.vue

eslint-vue1

可看到报错信息。

配置VS code来显示报错提示

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

可看到提示界面如下:

eslint-vue2

自动修复eslint报错

以上VS code已配置了保存时自动修复功能

也可使用命令行进行修复

1
node_modules/.bin/eslint --fix src/app.vue