关于前端:搭配vs-code来用Vite3初始化Vuejs3的TS项目并配置ESLint和Prettier

0. 事先筹备

环境

• Windows 10
• vs code
• Node.js：v18.0.0
• 留神！本文章应用 Vite v3.0 构建

装置

• 装置 Node.js（必须）
• 装置 yarn（非必须，能够用npm 或者 pnpm，本文应用yarn 作为包治理）
• 装置 Git（非必须）

1. 初始化 Vue.js

这一步没什么好说的，间接参考官网
在你想新建我的项目的文件夹输出下述指令

yarn create vite

输出我的项目名，这里叫vite，也是本次的主目录

抉择框架，这里抉择vue

抉择应用 js 还是ts，这里抉择ts

新建结束，进入 vite 文件并装置

cd vite
yarn

启动我的项目

yarn dev

启动后，如图所示启动胜利

2. 追加 git（非必须）

初始化 git

git init

新建 .gitignore，设置 git 疏忽文件
内容依据本人的爱好

node_modules
.DS_Store
dist
*.local
*.code-workspace
.vscode

3. 追加 editorconfig（非必须）

新建 .editorconfig，设置编辑器和 ide 标准
内容依据本人的爱好或者团队标准
应用 vs code 的话，倡议配合插件一起应用

root = true
​
[*.{js,ts,json}]
indent_size = 2
charset = utf-8
indent_style = space
trim_trailing_whitespace = true
insert_final_newline = true

4. 更改端口（非必须）

在 package.json 文件

// 批改前
"dev": "vite",
​
// 批改后，填入你喜爱的端口即可
"dev": "vite --port 8000",

5. 追加 ESLint

在 vite 目录输出如下指令
装置外围依赖 eslint，搭配vue 的插件，搭配 ts 的插件 应用 vs code 的话，倡议配合插件一起应用

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

在 package.json 文件，增加 lint 脚本，依据爱好能够不加

"lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}"

在 vite 目录，追加 .eslintrc.cjs 文件，依据集体爱好写入规定
如果你应用 node18 和vite3，那么 .eslintrc 最好是 cjs 文件而不是js

module.exports = {
  root: true,
​
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
​
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
  ],
​
  parserOptions: {ecmaVersion: 12,},
​
  plugins: ["vue", "@typescript-eslint"],
​
  rules: {// 你的丑陋的规定},
};

6. 追加 Prettier

在 vite 目录输出如下指令
应用 vs code 的话，倡议配合插件一起应用

yarn add -D prettier @vue/eslint-config-prettier 

在 vite 目录，追加 .prettierrc.cjs 文件，依据集体爱好写入规定
如果你应用 node18 和vite3，那么 .eslintrc 最好是 cjs 文件而不是js

module.exports = {
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  useTabs: false,
  printWidth: 120,
  proseWrap: 'preserve',
  trailingComma: 'all',
  // 你的丑陋的规定
}

7. 设置 vs code

关上首选项，这里间接编辑setting.json，追加

  // 在保留时主动整形
  "editor.formatOnSave": true,
​
  // Prettier 作用于什么文件
  "": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},

8. 验证

验证 Prettier

在 App.vue 清理掉初始代码，并成心写一个比拟丑的div

<template>
         <div>1
  </div>
</template>

点击保留，主动整顿了代码就是胜利

<template>
  <div>1</div>
</template>

验证 ESLint

还是在 App.vue，在没有设置规定的前提下，成心申明test 为数字却赋值为字符串

<script setup lang="ts">
  const test: number = '1' // 报错
</script>

看到报错信息，你曾经胜利了

9. 还有一个问题

关上 vite 目录的 index.html 你会发现，这个文件有报错
然而这个问题不影响什么，所以这么放着也没问题
这是因为 eslint 无奈辨认 html 文件，对应如下

yarn add -D eslint-plugin-html

在 .eslintrc.cjs 文件的 plugins 里援用，保留后报错就隐没了

// .. 省略
​
plugins: ['vue', 'html', '@typescript-eslint'],
​
// .. 省略

10. 最初

• 没有援用任何第三方 eslint 规定，这里应用的是 eslint 默认规定，如果须要应用如 google 等规定能够本人初始化 eslint 并追加
• 同样公布于自己的掘金和博客