.editorconfig：编辑器的一些配置
~~~
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
~~~
.eslintignore：忽略语法检查的目标文件
~~~
/build/
/config/
/dist/
/*.js
~~~
.eslintrc.js:eslint的配置
~~~
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
'plugin:vue/essential',
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
~~~
extends：标准规则
rules：预先规则,对具体规则进行修改。
.gitignore：git上传忽略掉的代码文件
index.html：入口文件，项目编译过程中，自动插入。
package.json：项目配置文件，描述已项目
scripts：定义新命令。
bug解决
问题
~~~
props: {
data: {
type: Array,
default: ()=> []
}
},
~~~
会报错，需要解决：
If i may, that will be a bug. Because every instance will share the same thing when I not passing target property to this component.[Try this fiddle.
~~~
props: {
data: {
type: Array,
default: () => []
}
},
~~~
查看错误：
~~~
"lint": "eslint --ext .js,.vue src"
npm run lint
~~~
自动修复错误
~~~
"lint": "eslint --fix --ext .js,.vue src"
npm run lint
~~~
配置项
~~~
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off', //生成器星号空格限制
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"indent": ["off", 2],
// 'space-before-function-paren': 0,//function之前是否加空格
// 'spaced-comment': 0, // 注释符合和内容之间要有空格
'no-multi-spaces': 0,//连续多个不用于缩进的空格通常是错误。
// 'keyword-spacing': 0,//例如function和if。这些标识符对语言有特殊意义，因此在代码编辑器中经常以不同的颜色显示。作为语言的重要组成部分，风格指南通常指的是围绕关键词使用的空格。
// 'space-before-blocks': 0, fix可修复
//如果是的"always"话，块必须至少有一个先前的空间。
//如果"never"那么所有的块都不应该有前面的空间。如果功能块，关键字块和类需要不同的间距，则可以将一个可选配置对象作为规则参数进行传递，以分别配置这些情况。
// 'padded-blocks': 0, //某些样式指南要求块语句以空行开头和结尾。
'no-multiple-empty-lines': 0, //多个空白行
'eol-last': 0,//每个文件末尾必须有空行，我觉得没必要
// 'semi':0, //不要用分号
// 'comma-dangle': 0, //后面不要吊逗号（对象最后一个属性之后）
'no-trailing-spaces': 0,//不要有空行
// 'key-spacing': 0,//冒号后要有空格，
//箭头左右要有空格（arrow-spacing）
}
}
~~~
最新eslint校验
~~~
npm install eslint-plugin-vue -D
extends: [
'plugin:vue/essential',
'standard'
],
~~~
## 使用eslint检查代码质量
javascript是一门弱类型语言，所以语法检查变得尤为重要。前端IDE开发工具，轻量级编辑器+语法检查工具（eslint）
配置方式：通过配置文件(.eslintrc.js)文件
扩展配置文件：extends字段可以扩展集成现有的规则。
~~~
extends: [
'plugin:vue/essential',
'standard'
],
~~~
Vuejs项目，需要同时对.vue文件中的js代码进行检测，需要利用**eslint-plugin-vue插件**来搭配使用。
~~~
npm install eslint eslint-config-standard eslint-plugin-import eslint-plugin-vue --save-dev
~~~
安装之后配置.eslintrc.js文件，可以添加规则（rules）
在package.json添加lint脚本
~~~
// ...
"scripts": {
// ...
"lint": "eslint --ext .js,.vue src"
},
// ...
"scripts": {
// ...
"lint": "eslint --fix --ext .js,.vue src"
},
~~~
--ext参数用来指导需要检查的扩展名的文件。src指定检查的目录
好处：
比如父组件往子组件传递属性，如果属性默认是一个空数组，必须函数的方法写。不然多个父组件调用时，会公用这个数组，导致数据共享，不可取。
