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

锐角同学

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

阅读量828

点赞数

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

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

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

版权

从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"