需求
在vue2项目中支持ts语法的使用
本文使用的环境:
脚手架版本5.0
node版本:18.9.0
配置过程
- 安装依赖:
npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript vue-eslint-parser --D
- 在项目根目录创建tsconfig.json文件
{
"compilerOptions": {
"module": "esnext",
"target": "es5",
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
// 用于指定是否启用实验性的装饰器特性
"experimentalDecorators": true
},
"allowJs": true,
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
- 在vue.config.js中配置
// 全局变量配置
chainWebpack: (config) => {
// 添加后缀拓展引入支持
config.resolve.extensions.add('.ts').add('.tsx');
config.module
.rule('ts')
.test(/\.(ts|tsx)$/)
.use('ts-loader')
.loader('ts-loader')
.options({
// 配置能够识别vue中的ts
appendTsSuffixTo: [/\.vue$/]
})
.end();
},
- 配置eslint支持ts,在eslintrc.js中配置
module.exports = {
root: true,
env: {
node: true
},
extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/recommended'],
// 使用vue-eslint-parser避免报错 ‘>’
parser: 'vue-eslint-parser',
parserOptions: {
parser: {
// 根据不同使用不同的编译
js: '@babel/eslint-parser',
ts: '@typescript-eslint/parser',
vue: '@typescript-eslint/parser',
['<template>']: "@typescript-eslint/parser",
}
// plugins: ['@typescript-eslint']
// ecmaFeatures:{
// jsx:true
// }
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
semi: [2, 'always']
}
};