vue eslint 升级_将已有的Vue项目升级支持TypeScript

TypeScript是js的超集，是由微软开发的。越来越多的项目使用TypeScript。像现在很火的Visual Studio Code就是使用TypeScript开发。

本人开发过一段Angular的项目，Angular就是基于TypeScript开发的，很喜欢这种，可以快速的从一个Java开发者无缝的切换到前端开发。

Vue也随应时代的大潮流，支持了TypeScript。在使用Vue CLI创建新项目的时候就可以直接选择TypeScript，就会创建一个基于TypeScript的基本的Vue项目。使用了一段时间感觉还可以，就着手把原来的项目升级为支持TypeScript。

1. 安装typescript

首先需要在项目中增加TypeScript语法支持：

npm install -D typescript

2. 安装Vue插件

Vue官方为我们提供了一个插件，用来聚合eslint和tslint

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript

3. 安装Vue TypeScript注解支持

在开发后端项目的时候，使用了大量的Spring注解，同样在开发Angular项目的时候，也使用Angular提供的装饰器。既然Vue集成了TypeScript，我们就需要使用官方提供的Vue TypeScript装饰器来替换原来的js方式来创建组件：

npm -S vue-class-component vue-property-decorator

4. 新建tsconfig.json

增加TypeScript编译参数配置：

{  "compilerOptions": {    "noImplicitAny": false,    "target": "esnext",    "module": "esnext",    "strict": true,    "jsx": "preserve",    "importHelpers": true,    "moduleResolution": "node",    "experimentalDecorators": true,    "esModuleInterop": true,    "allowSyntheticDefaultImports": true,    "sourceMap": true,    "baseUrl": ".",    "types": ["webpack-env"],    "paths": {      "@/*": ["src/*"]  // -- 配置简短别名    },    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]  },  "include": [    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx",    "examples/**/*.ts",  //-- examples相关配置为项目特殊配置，可以不需要    "examples/**/*.tsx",    "examples/**/*.vue"  ],  "exclude": ["node_modules"]}

5. 将main.js转换为main.ts

main.ts

import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store';import axios from 'axios';import FinD from '@weus/fuc-design';import '@weus/fuc-design/lib/theme-default/index.css';import MerakUI from '../packages';Vue.use(FinD);Vue.use(MerakUI);Vue.prototype.$http = axios;Vue.config.productionTip = false;new Vue({  router,  store,  render: h => h(App)}).$mount('#app');​

6. 添加vue声明文件

shims-vue.d.ts

declare module '*.vue' {  import Vue from 'vue';  export default Vue;}

shims-tsx.d.ts

import Vue, { VNode } from 'vue';declare global {  namespace JSX {    // tslint:disable no-empty-interface    interface Element extends VNode {}    // tslint:disable no-empty-interface    interface ElementClass extends Vue {}    interface IntrinsicElements {      [elem: string]: any;    }  }}

7. 修改项目入口配置

此配置是因为我的项目入口不是原来的src下面的，所以需要单独配置。

vue.config.js

  pages: {    index: {      entry: 'examples/main.ts',      template: 'public/index.html',      filename: 'index.html'    }  },

8. 修改lint配置

.eslintrc.js

module.exports = {  root: true,  env: {    node: true  },  extends: [    'plugin:vue/essential',    'eslint:recommended',    '@vue/typescript/recommended',    '@vue/prettier',    '@vue/prettier/@typescript-eslint'  ],  parserOptions: {    // parser: 'babel-eslint'  // --    ecmaVersion: 2020  },  rules: {    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'  }};​

原来项目中的配置为parser: 'babel-eslint' ，此时在TypeScript文件中声明一个实例为null 会校验提示错误。

9. 结束

到此为止，我们就可以很愉快的使用TypeScript方式去开发Vue项目了。如果使用了Vuex，还需要单独去配置Vuex的装饰器依赖。当然，不使用装饰器，我们也可以使用原来的方式使用Vue的一些特性。前端开发就是这么随性。