[GN] 使用vue3+vite+ts+prettier+eslint

GGood_Name

已于 2024-01-31 12:32:42 修改

阅读量1k

点赞数 26

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2024-01-15 23:11:04 首次发布

本文链接：https://blog.youkuaiyun.com/qazwsxedcrfvrgb/article/details/135613225

版权

本文介绍了如何在Vue项目中集成eslint和prettier工具，包括安装配置、创建.eslintrc和.prettierrc文件，以及在VSCode中的统一设置，以确保代码质量和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

做到代码格式等统一，此时，esint和prettier就要登场了。

学习内容：

eslint是代码检测工具，可以检测出你代码中潜在的问题，比如使用了某个变量却忘记了定义。
prettier是代码格式化工具，作为代码格式化工具，能够统一你或者你的团队的代码风格。

=> 安装prettier+eslint包，并做一系列的配置

学习时间：

创建项目

yarn create vite

选择vue 作为 framework
选择 vue-ts

是package.json中配置的eslint和prettier相关的包：

{
   
  "name": "xxx",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
    "vue": "^3.2.47"
  },
  "devDependencies": {
   
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-node": "^11.1.0"