vue2老项目添加typescript与eslint支持(不用TSlint)
Author：zhoulujun Date：
写了三四年年多的TS了，接手vue2.0的项目一个大的可视化项目，才越发觉得TS的珍贵的。
之前java转到前端，一直对JavaScript不是不是很有好感，总觉得写java舒服些。但是有了Typescript后，java的感觉又回来的。感觉没有typescript的日子，就如生活没有甜呀。
vue-cli不加typescript 与加上typescript的规则，代码风格还是不一样的。之前的vue项目是不加分号的，对象尾项不加逗号的。
当然公司项目，得跟着公司分格走。这里面就会产生一系列的问题，需要调整，不能一言尽言之。
在代码规范化方面，先回顾下这个五个概念：
EditorConfig：不同编辑器和IDE之间定义和维护一致的代码风格；.editorconfig。可以帮助开发者在不同的编辑器和 IDE 之间定义和维护一致的代码风格。像我这种intellij老用户，是不会绝不会轻易放弃的。《intellij前端代码格式化优化设置—为Vue推荐标准需要做的修改》之前需要共享配置，现在可以通过.editorconfig规范化。目前大部分的编辑器都支持。
ESlint：代码检查工具； .eslintrc.js。帮助我们规范代码质量，提高团队开发效率。《Eslint静态代码检查——参数配置详细说明》，其实也没有啥好说的。
prettier：一个 Opinionated 的代码格式化工具； .prettierrc 。能够统一团队编码风格，极大的提高团队执行效率——统一的编码风格能很好的保证代码的可读性。《治愈代码洁癖prettier药到病除》
husky[ˈhʌski] -狗头：一个让配置 git hooks 变得更简单的工具 .huskyrc。为了防止一些不规范的代码commit 并push到远端，我们可以在git命令执行前用一些钩子来检测并阻止。
lint-staged：只对 git 中变更的文件进行 lint 操作；.lintstagedrc。针对暂存的 git 文件运行 linters，杜绝不符合规则的代码溜进代码库。
这写基础性东西，这里就不再赘述了。本文默认都了解这些东西，所以，值概括下基本操作流程。
vue-cli 添加typescript
对于vue2的老项目，如果原来的项目是vue-cli创建的。先直接升级vue-cli4。
然后直接原来的项目的父目录，执行 vue create 项目名称。选择合并。
Vue CLI v4.5.9 ? Target directory /Users/andyzhou/www/test/vue-type-script already exists. Pick an action: (Use arrow keys) ❯ Overwrite Merge Cancel
就会跳出如下图界面，选择手工选择功能项。
按照自己的所需，选择相关配置。最后在代码检查一步，选择ESlint+pretier
? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ❯ ESLint + Prettier TSLint (deprecated)
个人推荐使用eslint
ESLint和TSLint为什么推荐eslint
TSLint仅针对TS代码，因此如果采用TSLint规范TS代码，JS代码需要采用其他工具。而ESLint不仅能规范js代码，通过配置解析器，也能规范TS代码。此外由于性能问题，TypeScript 官方决定全面采用ESLint。
TypeScript 有强大的 类型系统 和 对ES6+ 的支持。 在编译过程中已经可以检测出很多问题。为什么不使用呢？
因为TypeScript 关注的是类型的匹配，而不是代码风格。
ESLint 在 TypeScript 团队发布全面采用 ESLint 之后，发布typescript-eslint 项目，以集中解决TypeScript 与 ESLint兼容性问题。而ESLint不再维护typescript-eslint-parser，也不会在npm 上做任何发布。TypeScript 解析器转移至Github 的 typescript-eslint/parser。
webpack添加typescript
这方面，官方文档其实写的非常清楚：https://webpack.js.org/configuration/configuration-languages/#typescript。网上的教程也特别多。所以就略过。顺手安利下 我厂的 配置库：https://github.com/AlloyTeam/eslint-config-alloy
接入eslint 接入typescript后，且按照eslint fixed（个人推荐用IDE 格式 eslint 格式化代码)后。或者使用prettier。
IED配置Prettier
在代码编辑器上配置Pretier，写代码的时候，配置自动保存，自动格式化代码。就轻松了许多。
像jetbrain系列的编辑器都有自动保存 自动格式化的功能，但是无法与elsint 配合。而prettier恰好可解决这个痛点。其他编辑器情况应该类似。
Webstorm/intellij配置
首先WebStorm 配置 ESLint 即时检查，这个之前已经记录过：《老项目如何使用VScode或者webstorm格式化eslint/prettier规则》
VScode 配置
首先需要安装Eslint、Prettier、Vetur插件，看了下可以直接工作，当然，我是不使用VScode的。
具体配置，参考同类文章：
使用ESLint+Prettier规范React+Typescript项目 https://zhuanlan.zhihu.com/p/62401626
Vue项目接入Eslint+Prettier+Husky格式化代码 https://zhuanlan.zhihu.com/p/159729783
vscode + vetur + eslint + prettier 实现团队代码风格统一 https://trainspott.in/2018/12/07/vscode+vetur+eslint+prettier实现团队代码风格统一/
Eslint和Prettier冲突了怎么办？
Eslint的主要功能包含代码格式的校验，代码质量的校验，JS规范，如用===而不是==判断相等、用驼峰命名变量而不是用下划线。
Prettier 是美丽的意思,只是代码格式的校验（并格式化代码），不会对代码质量进行校验，如单行代码长度、tab 长度、空格、逗号表达式等问题。
在实际项目中：
eslint可以检测出代码问题，并标红，但是并不会自动格式化，需要手动格式化。
Prettier可以进行自动化，配置（需要分webstorm和vscode）。
但是需要考虑到的是，prettier和eslint的规则有可能冲突，因此需要考虑到当冲突时，需要解决冲突，得以prettier为准。
工程优化配置
一顿操作下来，新工程肯定没有啥问题。对于老项目，会出现一堆的error，直接歇菜。项目无法启动，哈怎么开发？
首先eslint，把error项目，先warning，先上车再说，后面再慢慢优化，这是痛苦的过程，格式化无法解决问题，只有人肉。
第二个，是typescript配置方面，也改为warning，特别注意的是，要兼容JavaScript，以兼容老项目！不可能一下子完全迁移到TS上来。
{
"defaultSeverity": "warning",
"compilerOptions": {
"allowJs": true,
}
}还是那句话，先让项目跑起来，再慢慢改
第三个，原来老项目的不规范，需要处理一些全局变量和typescript的全局变量声明
eslint：
globals: {
// 全局变量提取
}对于TS，一些error解决
// shims-tsx.d.ts
declare global {
interface Window {
gVue:any,
}
}
// shims-vue.d.ts
declare module 'js-cookie'
// 等等既然换上了TS，还是尽量少用any。对于值类型，尽量精准。比如之前
const localeMessageDict: { [language: string]: 'enMessage' | 'cnMessage' } = {
en: 'enMessage',
'zh-cn': 'cnMessage',
cn: 'cnMessage',
};
const getRules = function (locale: 'cn'|'en'|'zh-cn'): Rules {
const language: 'enMessage' | 'cnMessage' = localeMessageDict[locale];
const validatorRules: Rules = {};
Object.keys(rules).forEach((key: string) => {
const rule: Rule = rules[key];
const message: string = rule[language];
validatorRules[key] = {
message,
computesRequired: rule.computesRequired,
validate: rule.validate,
};
});
return validatorRules;
};如果是，增加ru 、fr呢？这些，稍后再开一个专题。
今天回家早点。不写了。文章，随意写的，看回馈在优化吧。我觉得这里面其实一路操作下来，感觉没有什么高精尖的技术。就提取几个点 扫一扫。
转载本站文章《vue2老项目添加typescript与eslint支持(不用TSlint)》,
请注明出处：https://www.zhoulujun.cn/html/Operation/codeGuide/8602.html