2.从0搭建vue3项目--检查工具与typescript

锐角同学

已于 2022-05-05 22:38:25 修改

阅读量835

点赞数

分类专栏： vue3--项目搭建文章标签： vue typescript

于 2022-05-05 22:32:11 首次发布

本文链接：https://blog.csdn.net/qq_31202009/article/details/124599179

版权

本文档介绍了如何从零开始构建一个Vue3项目，重点关注使用eslint进行代码检查，prettier进行格式化，以及typescript的集成。详细步骤包括eslint的选择配置，typescript的安装，prettier的配置以实现保存时自动修复错误，以及针对.vue文件的ts配置。最终，项目能够正常启动并自动调整代码格式。

摘要由CSDN通过智能技术生成

从0搭建vue3项目–检查工具与typescript

本系列主要讲述如何从 0 构建 vue3 项目，以熟悉项目构建流程，方便日后回顾
本章主要说明应用eslint, prettier,typescript 的步骤

代码检查工具 eslint

全局安装

yarn add eslint -g
# eslint 初始化
eslint --init

配置项可以如下选择

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript

以上选择等价于安装以下插件

yarn add eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

安装typescript

yarn add typescript -D

配置 .eslint.js

module.exports={
   
    // 运行环境
    "env": {
   
        "browser": true,
        "es2021": true,
        "node": true
    },
    // 规则包
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    // 解析器配置项
    "parserOptions": {
   
        "ecmaVersion": "latest",
        "parser"