前端工程化之路-语法检查

javascript做为前端的利器，上可撸AI，下可写驱动，（好吧，我认可我瞎编的），可是js做为一门弱类型的动态语言，在给咱们带来方便的同时，也会悄悄的埋下坑，尤为是在大型项目中，一不当心，就要加班填坑，因此为了愉(早)快(下)工(班)做，咱们选择使用eslint做为javascript的语法检查工具，tslint做为TypeScript 的语法检查工具，咱们的目标是

1. 提升代码质量，避免低级的bug
2. 规范化编码，统一代码风格

eslint官方地址

tslint官方地址

配置规则

eslint 和 tslint 的规则网上介绍已经很是多，配置项也简单易懂，为了不该文章篇幅过长，配置规则文件另起一篇 语法检查-配置规则

eslint

'extends': [
        "eslint:recommended",
        "standard",
        "plugin:react/recommended",
        "plugin:vue/base",
    ],
复制代码

推荐这几个插件，都是业内流行的规范，插件地址以下

standard

react检查规范 plugin:react/recommended

vue检查规范 plugin:vue/base

tslint

开启以下插件

"extends": [
        "tslint:recommended"
    ]
复制代码

搭配vscode使用

推荐两个插件

tslint插件地址

eslint插件地址

可共享的配置

当有多个项目的时候，咱们就能够考虑将配置独立出来，统一管理，能够经过npm来管理的配置文件，将配置文件独立为一个项目维护，若是是内网项目，可以使用 npm install <git remote url> 进行安装 详细使用方法以下：

npm install <git remote url>: <protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

tip：项目名称须要按照这样的格式 eslint-config-mylint

在配置文件.eslintrc.js中，改成以下

module.exports = {
    "extends": [
        "mylint"
    ]
};
复制代码

填坑

行内规则

在某些状况下须要对个别文件和某行代码特殊处理时，使用注释的形式

eslint

该文件不参与语法校验 /* eslint-disable */

容许使用 console /* eslint no-console: 0 */ or /* eslint-disable no-console */

tslint

该文件不参与语法校验 /* tslint:disable */

容许使用 console /* tslint:disable:no-console */

jquery 与箭头函数

1. 由于箭头函数的优点和其简洁，因此咱们在项目中推荐使用箭头函数，箭头函数有个特性

箭头函数没有它本身的this值，箭头函数内的this值继承自外围做用域，没有局部this的绑定，即this不在是动态改变的

因部分项目仍是基于jquery的，因此避免不了在dom元素上绑定事件监听函数，在使用 function的时候，dom事件被触发，回调函数中的this指向该dom，可当咱们换成箭头函数时，this就不在是dom，而是上下文，举个栗子

<div class="outer">
    <div class="inner">ww</div>
</div>
复制代码

$('.outer').on('click', (event) => {
        console.log(this) // 再也不是dom对象
        console.log(event.target) // 这个才是dom对象
    })
复制代码

所以在修改dom元素的监听事件回调的时候，记得要同步将 this 一同修改

2. currentTarget 与 target 的区别与使用 在监听的节点里面还有嵌套节点的状况下，使用 event.target 将会有问题，栗子以下

<div class="outer">
    <div class="inner">cc</div>
</div>
复制代码

// 在须要监听的节点里，还有嵌套节点的状况下，须要注意
$('.outer').on('click', (event) => {
    console.log(event.target) // 获取的是点击的对象 inner
    console.log(event.currentTarget) // 获取的监听的对象 outer
})
复制代码

因此在点击 cc的时候，event.target获取到的是点击的元素对象，而监听的对象就须要改为这样获取 event.currentTarget，这个才是function 下的 this

typescript 自定义声明文件

TypeScript 是javascript的超集，用起来那是一个爽啊，谁用都说好

公司内部研发了一套UI框架，在配合ts使用的时候，发现不少方法缺乏声明，因此咱们须要编写声明文件，官方地址以下

typescript-声明文件

鹅外话

css的格式化，咱们推荐使用 csscomb ，且它还支持在线生成规则，不能在人性化了，目前对主流编辑器和构建工具都支持良好

参考文章

Configuring ESLint

通俗的方式理解动态类型，静态类型；强类型，弱类型

currentTarget 与 target 的区别