从0开始为Vue3+TS+Vite项目设置ESLint+Prettier

初始化项目

使用cli下令初始化一个Vue3+TS+Vite项目：

1. # npm
2. npm create vite@latest
4. # yarn
5. yarn create vite
7. # pnpm
8. pnpm create vite

复制代码

注：后续演示使用pnpm包管理器。
按下图选择设置：

设置ESLint

1、安装ESLint

实行cli下令安装和初始化ESLint：

1. # npm
2. npx eslint --init
4. # yarn
5. yarn dlx eslint --init
7. # pnpm
8. pnpx eslint --init

复制代码

实行下令后，会扣问具体设置信息，根据现实必要举行设置：

• What do you want to lint? 你想查抄什么文件？
  选择 JavaScript
  
  
  
  
• How would you like to use ESLint? 你渴望 ESLint 做什么？
  选择 To check syntax and find problems ，语法+埋伏bug查抄
  
  
  
  
• What type of modules does your project use? 你的项目用什么模块化？
  选择 JavaScript modules (import/export) ，使用ES模块
  
  
  
  
• Which framework does your project use? 你的项目用什么框架？
  选择 Vue.js
  
  
  
  
• Does your project use TypeScript? 你的项目用TypeScript吗？
  选择 Yes
  
  
  
  
• Where does your code run? 你的代码运行在那里？
  空格选择 Browser 和 Node ，欣赏器 + Node 环境都支持
  
  
  
  
• Which language do you want your configuration file be written in? 你的 ESLint 设置文件想用什么语言写？
  选择 TypeScript
  
  
  
  
• Jiti is required for Node.js  {} 而非 item => {} 。
  
• requirePragma: false
  不必要文件顶部添加特殊表明就主动格式化，一样寻常开发必备。
  
• insertPragma: false
  不主动在文件顶部插入格式化标志，制止冗余代码。
  
• proseWrap: "preserve"
  保持 markdown 等文本文件的原始换行方式，不逼迫重新排版。
  
• htmlWhitespaceSensitivity: "css"
  HTML 空缺字符遵照 CSS 体现规则，制止 Vue 模板因空格导致布局非常。
  
• vueIndentScriptAndStyle: true
  Vue 专属设置，让 .vue 文件中 <script> 和  标签内的内容主动缩进，更雅观。
  
• endOfLine: "lf"
  同一换行符为 LF，办理 Windows (CRLF) 和 Mac/Linux (LF) 换行符辩论题目，Git 协作必备。
  

免责声明：如果侵犯了您的权益，请联系站长及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金.