vue3-typescript
2024年04月29日
.eslintrc.js
:::details 点击查看代码
module.exports = {
root: true,
env: {
browser: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
plugins: ['vue'],
rules: {
'@typescript-eslint/no-unused-vars': 'off', //是否禁止未使用的变量
'@typescript-eslint/no-var-requires': 'off', //是否禁止在 import 语句之外使用 require 语句
'@typescript-eslint/explicit-module-boundary-types': 'off', //是否要求导出函数和类的公共类方法的显式返回和参数类型
'@typescript-eslint/triple-slash-reference': 'off', //是否禁止使用/// <reference path="" />，/// <reference types="" />或/// <reference lib="" />指令
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-multi-str': 0, //字符串不能用\换行
'vue/html-self-closing': [
/**
* @description:强制自动关闭标签
*/
'error',
{
html: {
void: 'always', // 单标签（空元素）（中间没有任何内容的元素:br、meta、hr、link、input、img）
normal: 'never', // 双标签
component: 'any', //组件
},
svg: 'always',
math: 'always',
},
],
'vue/prop-name-casing': ['error', 'camelCase'], // vue Template 中的属性名称强制使用小驼峰
semi: 2, //分号 检测开关
},
};
:::
.prettierrc.js
:::details 点击查看代码
module.exports = {
arrowParens: 'always', //箭头函数，只有一个参数的时候，是否需要括号
bracketSpacing: false, //大括号内的首尾是否需要空格
eslintIntegration: true, //是否需要 prettier 使用 eslint 的代码格式进行校验
insertPragma: false, //是否需要自动在文件开头插入 @prettier
jsxBracketSameLine: true, // jsx 标签的反尖括号是否需要换行
jsxSingleQuote: false, // jsx 是否需要将双引号转换为单引号
printWidth: 80, //超过最大值换行
requirePragma: false, //是否需要写文件开头的 @prettier
semi: true, //行尾是否需要分号 （需要跟 eslint 保持一致）
singleQuote: true, //是否需要将双引号转换为单引号
trailingComma: 'all', //在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
tabWidth: 4, //缩进字节数
useTabs: false, //缩进是否使用 tab
};
:::
editorconfig
作用 在团队开发中保持代码规范使得代码风格一致
- 安装 EditorConfig for VS Code 插件
- 项目根目录新建 .editorconfig 文件
:::details 点击查看代码
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
in_empty_tag = true
:::
.vscode
settings.json
:::details 点击查看代码
{
//自动换行
"editor.wordWrap": "on",
//开启 保存自动格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.options": {
"extensions": [".js", ".vue", ".jsx", ".ts", ".tsx"]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"vue-html",
"typescript",
"typescriptreact"
]
}
:::
tsconfig.json
:::details 点击查看代码
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react", // 不保留 jsx 语法，直接编译成 ES5 , 后缀改为 js
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
:::
package.json
:::details 点击查看代码
{
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"serve": "vite preview"
},
"dependencies": {
"@types/vue": "^2.0.0",
"vue": "^3.0.5"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.21.0",
"@typescript-eslint/parser": "^2.20.0",
"@vitejs/plugin-vue": "^1.2.3",
"@vue/compiler-sfc": "^3.0.5",
"@vue/eslint-config-standard": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.5.1",
"eslint-config-prettier": "^6.10.0",
"eslint-config-standard": "14.1.1",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^7.10.0",
"prettier": "^1.19.1",
"typescript": "^4.3.2",
"vite": "^2.3.7",
"vue-eslint-parser": "^7.0.0",
"vue-tsc": "^0.0.24"
}
}
:::