关于前端:搭配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作用于什么文件
  "[javascript]": {
    "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并追加
• 同样公布于自己的掘金和博客