前端中几个常用的配置
整理部分个人在开发中觉得比较常用的配置信息的配置项，为了方便查阅使用。
1. 工程化
prettier
{
/** 代码基本配置 **/
printWidth: 100, // 超过最大值换行
tabWidth: 2, // 缩进字节数
useTabs: false, // 缩进不使用tab，使用空格
semi: true, // 句尾添加分号
singleQuote: true, // 使用单引号代替双引号
arrowParens: "<always | avoid>", // 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
// (x) => {} // 格式化成该形式
bracketSpacing: true, // 在对象，数组括号与文字之间加空格
// { foo: bar } // 格式化成该形式
endOfLine: "<lf | crlf | cr | auto>", // 结尾是 \n \r \n\r auto
proseWrap: "<always | never | preserve>", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
ignorePath: ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
requireConfig: false, // Require a 'prettierconfig' to format prettier
trailingComma: "<es5 | none | all>", //在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
/** 解释器 **/
parser: "babylon", // 格式化的解析器，默认是babylon
/** html **/
htmlWhitespaceSensitivity: "<css | strict | ignore>",
/** 去除如下问题
<span class="input-select"
>yf-inputyf-inputyf-inputyf-inputyf-inputyf-input</span
>
**/
/** jsx **/
jsxBracketSameLine: false, // 在jsx中把'>' 是否单独放一行
jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
/** 不同语言的配置 **/
disableLanguages: ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验
eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
}
具体的配置信息： www.prettier.cn/docs/option…
eslint
规则 (rules)
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。
- 规则设置参数：
1. 这里可以传入一个 <0 | 1 | 2> 或者 <off | wran | error>
当前这几个值相对应如下：
1. `"off"` 或 `0` - 关闭规则
2. `"warn"` 或 `1` - 开启规则，使用警告级别的错误：`warn` (不会导致程序退出)
3. `"error"` 或 `2` - 开启规则，使用错误级别的错误：`error` (当被触发的时候，程序会退出)
2. 这里也可以传入一个数组 [rule, config]
1. `rule` 就是第一点中的规则设置参数值
2. `config`不同的规则下自己的具体配置值，这个可以根据<http://eslint.cn/docs/rules/>中进行查阅
- 部分配置项
rules: {
'no-async-promise-executor': 1, //禁止使用异步函数作为 Promise executor
'no-await-in-loop': 1, // 禁止使用 await async
'no-console': 1, //禁用 console
'no-debugger': 1, //禁用 debugger
'no-dupe-args': 2, //函数参数不能重复
'no-regex-spaces': 2, //禁止正则表达式字面量中出现多个空格
'default-case': 2, //switch语句最后必须有default
'no-alert': 0, //禁止使用alert confirm prompt
'no-array-constructor': 1, //禁止使用数组构造器
'no-bitwise': 0, //禁止使用按位运算符
'no-caller': 0, //禁止使用arguments.caller或arguments.callee
'no-catch-shadow': 2, //禁止catch子句参数与外部作用域变量同名
'no-class-assign': 0, //禁止给类赋值
'no-cond-assign': 0, //禁止在条件表达式中使用赋值语
'no-const-assign': 0, //禁止修改const声明的变量
'no-constant-condition': 0, //禁止在条件中使用常量表达式 if(true) if(1)
'no-continue': 0, //禁止使用continue
'no-control-regex': 2, //禁止在正则表达式中使用控制字符
'no-delete-var': 2, //不能对var声明的变量使用delete操作符
'no-div-regex': 1, //不能使用看起来像除法的正则表达式/=foo/
'no-dupe-keys': 2, //在创建对象字面量时不允许键重复 {a:1,a:1}
'no-duplicate-case': 2, //switch中的case标签不能重复
'no-else-return': 0, //如果if语句里面有return,后面不能跟else语句
'no-empty': 2, //块语句中的内容不能为空
'no-empty-character-class': 2, //正则表达式中的[]内容不能为空
'no-eq-null': 1, //禁止对null使用==或!=运算符
'no-eval': 0, //禁止使用eval
'no-ex-assign': 2, //禁止给catch语句中的异常参数赋值
'no-extend-native': 0, //禁止扩展native对象
'no-extra-bind': 2, //禁止不必要的函数绑定
'no-extra-boolean-cast': 2, //禁止不必要的bool转换
'no-extra-parens': 2, //禁止非必要的括号
'no-extra-semi': 2, //禁止多余的冒号
'no-fallthrough': 1, //禁止switch穿透
'no-floating-decimal': 2, //禁止省略浮点数中的0 .5 3.
'no-func-assign': 2, //禁止重复的函数声明
'no-implicit-coercion': 1, //禁止隐式转换
'no-implied-eval': 2, //禁止使用隐式eval
'no-inline-comments': 1, //禁止行内备注
'no-inner-declarations': [0, 'functions'], //禁止在块语句中使用声明（变量或函数）
'no-invalid-regexp': 2, //禁止无效的正则表达式
'no-invalid-this': 2, //禁止无效的this，只能用在构造器，类，对象字面量
'no-irregular-whitespace': 2, //不能有不规则的空格
'no-iterator': 0, //禁止使用__iterator__ 属性
'no-label-var': 2, //label名不能与var声明的变量名相同
'no-labels': 0, //禁止标签声明
'no-lone-blocks': 2, //禁止不必要的嵌套块
'no-lonely-if': 1, //禁止else语句内只有if语句
'no-loop-func': 1, //禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
'no-mixed-requires': [0, false], //声明时不能混用声明类型
'no-mixed-spaces-and-tabs': [2, false], //禁止混用tab和空格
'linebreak-style': [0, 'windows'], //换行风格
'no-multi-spaces': 1, //不能用多余的空格
'no-multi-str': 2, //字符串不能用\换行
'no-multiple-empty-lines': [1, {max: 2}], //空行最多不能超过2行
'no-native-reassign': 0, //不能重写native对象
'no-negated-in-lhs': 2, //in 操作符的左边不能有!
'no-nested-ternary': 0, //禁止使用嵌套的三目运算
'no-new': 1, //禁止在使用new构造一个实例后不赋值
'no-new-func': 1, //禁止使用new Function
'no-new-object': 1, //禁止使用new Object()
'no-new-require': 1, //禁止使用new require
'no-new-wrappers': 1, //禁止使用new创建包装实例，new String new Boolean new Number
'no-obj-calls': 0, //不能调用内置的全局对象，比如Math() JSON()
'no-octal': 2, //禁止使用八进制数字
'no-octal-escape': 2, //禁止使用八进制转义序列
'no-param-reassign': 0, //禁止给参数重新赋值
'no-path-concat': 0, //node中不能使用__dirname或__filename做路径拼接
'no-plusplus': 1, //禁止使用++，--
'no-process-env': 0, //禁止使用process.env
'no-process-exit': 0, //禁止使用process.exit()
'no-proto': 0, //禁止使用__proto__属性
'no-redeclare': 2, //禁止重复声明变量
'no-restricted-modules': 0, //如果禁用了指定模块，使用就会报错
'no-return-assign': 1, //return 语句中不能有赋值表达式
'no-script-url': 0, //禁止使用javascript:void(0)
'no-self-compare': 2, //不能比较自身
'no-sequences': 0, //禁止使用逗号运算符
'no-shadow': 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
'no-shadow-restricted-names': 2, //严格模式中规定的限制标识符不能作为声明时的变量名使用
'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格
'no-sparse-arrays': 2, //禁止稀疏数组， [1,,2]
'no-sync': 0, //nodejs 禁止同步方法
'no-ternary': 0, //禁止使用三目运算符
'no-trailing-spaces': 1, //一行结束后面不要有空格
'no-this-before-super': 0, //在调用super()之前不能使用this或super
'no-throw-literal': 1, //禁止抛出字面量错误 throw "error";
'no-undef': 1, //不能有未定义的变量
'no-undef-init': 1, //变量初始化时不能直接给它赋值为undefined
'no-undefined': 1, //不能使用undefined
'no-unexpected-multiline': 2, //避免多行表达式
'no-underscore-dangle': 1, //标识符不能以_开头或结尾
'no-unneeded-ternary': 1, //禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
'no-unreachable': 2, //不能有无法执行的代码
'no-unused-expressions': 2, //禁止无用的表达式
'no-unused-vars': [2, {vars: 'all', args: 'after-used'}], //不能有声明后未被使用的变量或参数
'no-use-before-define': 2, //未定义前不能使用
'no-useless-call': 2, //禁止不必要的call和apply
'no-void': 2, //禁用void操作符
'no-var': 0, //禁用var，用let和const代替
}
用户指南
开发指南
demo
这里可以根据自己的配置做实际的效果查看
vue
analysis
{
analyzerMode: "<server | static |disabled>",
// 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
// 在`static`模式下，会生成带有报告的单个HTML文件。
// 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerPort: 1067,
// 将在“服务器”模式下使用的端口启动HTTP服务器。
reportFilename: 'report.html',
// 相对于捆绑输出目录，将在`static`模式下生成的报告文件。
defaultSizes: '<stat | parsed | gzip>',
// 模块大小默认显示在报告中。
openAnalyzer: true,
// 在默认浏览器中自动打开报告
generateStatsFile: false,
// 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
statsFilename: 'stats.json',
stats.toJson（）方法的选项。
// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。
// 在这里查看更多选项：<https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21>
logLevel: 'info'
// 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
}
directive
钩子函数的参数
[el, binding, vnode, oldVnode]
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding: {name, value, expression, arg, modifiers}
name：指令名，不包括 `v-` 前缀。
value：指令的绑定值，例如：`v-my-directive="1 + 1"` 中，绑定值为 `2`。
oldValue：指令绑定的前一个值，仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 `v-my-directive="1 + 1"`中，表达式为 `"1 + 1"`。
arg：传给指令的参数，可选。例如 `v-my-directive:foo` 中，参数为 `"foo"`。
modifiers：一个包含修饰符的对象。例如：`v-my-directive.foo.bar`中，修饰符对象为 `{ foo: true, bar: true }`。
vnode：Vue 编译生成的虚拟节点。移步https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23VNode-%E6%8E%A5%E5%8F%A3来了解更多详情。
oldVnode：上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用。
生命周期
bind: 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
update: 被绑定于元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
componentUpdate:被绑定的元素所在模板完成一次更新更新周期的时候调用
unbind: 只调用一次，指令与元素解绑的时候调用
