Vite项目初始化

1
pnpm create vite

选择vue3+ts

安装依赖

  • 安装typescript及其插件
1
pnpm add -D typescript  @typescript-eslint/eslint-plugin @typescript-eslint/parser

typescript : typescript 核心库

@typescript-eslint/eslint-plugin: 这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范

@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码

  • 安装eslint及其插件
1
pnpm add -D eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier eslint-define-config vue-eslint-parser

eslint: elint核心库

eslint-plugin-vue: This plugin allows us to check the <template> and <script> of .vue files with ESLint, as well as Vue code in .js files.

eslint-config-prettier: 解决ESlint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使 用ESlint中的样式规范自动失效

eslint-plugin-prettier: 将prettier做为ESlint rules来使用

eslint-define-config: 编写.eslint.js文件时，用其暴露的defineConfig()，有提示。（此插件可有可无）

vue-eslint-parser：This parser allows us to lint the <template> of .vue files. （https://www.npmjs.com/package/vue-eslint-parser）

创建.eslintrc.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { defineConfig } = require('eslint-define-config')

module.exports = defineConfig({
  root: true,
  env: {
    es2021: true,
    browser: true,
    node: true,
  },
  parser: 'vue-eslint-parser',// 用来编译 <template> 标签里的代码
  parserOptions: {
    parser: '@typescript-eslint/parser', // 用来编译 <script> 标签里的ts代码
  },
  globals: {
    // script setup
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
  extends: [
    'plugin:vue/base',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    // 自定义你的规则
  },
})

创建 .prettierrc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// .prettierrc.js
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化内嵌代码
  embeddedLanguageFormatting: 'auto',
}