关闭eslint检查2020_Vue3全家桶
+ElementPlus+Vite+TypeS。。。
尤⼤的 Vue3.0 已经发布有⼀阵⼦了，已经很成熟了。
⽽且 Element Plus + Vite 也出了⼀段时间了，是时候该上⼿体验分享⼀波了。
主要是要熟练⼀下 Vue3，好准备⽤ Vue3 重构⼀下⾃⼰的⽹站项⽬: blog-vue-typescript ，计划是过年期间会着⼿重构这个项⽬，年后会上线。
1. 初化化项⽬
全局安装 vite-appnpm i -g vite-app
创建项⽬yarn create vite-app
# 或者
npm init vite-app
进⼊项⽬，安装依赖cd
yarn # 或 npm i
运⾏项⽬yarn dev
2. 引⼊TypeScript
加⼊ ts 依赖yarn add --dev typescript
在 项⽬根⽬录下创建 TypeScript 的配置⽂件 tsconfig.json{
"compilerOptions": {
// 允许从没有设置默认导出的模块中默认导⼊。这并不影响代码的输出，仅为了类型检查。"allowSyntheticDefaultImports": true,
// 解析⾮相对模块名的基准⽬录
"baseUrl": ".",
"esModuleInterop": true,
// 从 tslib 导⼊辅助⼯具函数(⽐如 __extends， __rest等)
"importHelpers": true,
// 指定⽣成哪个模块系统代码
"module": "esnext",
// 决定如何处理模块。
"moduleResolution": "node",
// 启⽤所有严格类型检查选项。
// 启⽤ --strict相当于启⽤ --noImplicitAny, --noImplicitThis, --alwaysStrict，
/
/ --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。"strict": true,
// ⽣成相应的 .map⽂件。
"sourceMap": true,
// 忽略所有的声明⽂件( *.d.ts)的类型检查。
"skipLibCheck": true,
// 指定ECMAScript⽬标版本
"target": "esnext",
// 要包含的类型声明⽂件名列表
"types": [
],
"isolatedModules": true,
/
/ 模块名到基于 baseUrl的路径映射的列表。
"paths": {
"@/*": [
"src/*"
]
},
// 编译过程中需要引⼊的库⽂件的列表。
"lib": [
"ESNext",
"DOM",
"DOM.Iterable",
"ScriptHost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
vue element admin]
}
在 src ⽬录下新加 shim.d.ts ⽂件/* eslint-disable */ import type { DefineComponent } from 'vue' declare module '*.vue' {
const component: DefineComponent
export default component
}
把 main.js 修改成 main.ts
在根⽬录，打开 Index.html
修改为：
3. 引⼊ eslint
安装 eslint prettier 依赖
@typescript-eslint/parser @typescr ipt-eslint/eslint-plugin 为 eslint 对 typescript ⽀持。yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin
在根⽬录下建⽴ eslint 配置⽂件： .ports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
// 'no-use-before-define': [
//  'error',
//  {
//    functions: false,
//    classes: true,
//  },
/
/ ],
'@typescript-eslint/no-use-before-define': 'off',
// '@typescript-eslint/no-use-before-define': [
//  'error',
//  {
//    functions: false,
//    classes: true,
//  },
// ],
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$'
}
],
'space-before-function-paren': 'off',
quotes: ['error', 'single'],
'comma-dangle': ['error', 'never']
}
};
建⽴ ports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。