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 viteyarn

启动我的项目

yarn dev

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

2.追加git（非必须）

初始化git

git init

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

node_modules.DS_Storedist*.local*.code-workspace.vscode

3.追加editorconfig（非必须）

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

root = true[*.{js,ts,json}]indent_size = 2charset = utf-8indent_style = spacetrim_trailing_whitespace = trueinsert_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并追加
  • 同样公布于自己的掘金和博客