查看网站dns,wordpress点餐,做竞争小的网站,潍坊专业网站建设价格下面是项目级完整配置1➡eslint#xff1a;【吐血分享#xff0c;博主踩过的坑你跳过去#xff01;#xff01;跳不过去#xff1f;太过分了给博主打钱】 浏览器自动打开项目#xff1a;
你想释放双手吗#xff1f;你想每天早上打开电脑运行完项目自动在浏览器打开吗【吐血分享博主踩过的坑你跳过去跳不过去太过分了给博主打钱】 浏览器自动打开项目
你想释放双手吗你想每天早上打开电脑运行完项目自动在浏览器打开吗不要9998不要998只要你在我们爱的 package.json 中配置一下即可显示。如下图所示 是的没错只需添加 dev: vite --open, 包你美梦成真。
配置eslint
是谁以前在vue.config.js里面偷偷的添加lintOnSave: false 关闭eslint检查逃过n节 是你吗我的先生女士们。。是我扭曲爬行尖叫因为eslint太烦了 但是eslint可以帮助我们检查js语法及少部分格式问题。 自从和我的同事他有代码洁癖一起工作之后我发现我被迫改了很多…非常感谢你和我一起实习的同事因为有你代码更规范~~~ eslint官网直达路线
安装eslint
安装最新版本的eslint
pnpm i eslint -D告诉eslint你要怎么工作
npx eslint --init我们用eslint 检查语法、发现错误如下图选择 我们的项目采用的js模块 的模块式开发如下图 框架选取vue如下图 是否使用ts是的。如下图 项目运行在浏览器还是node上我们选择浏览器。如下图 使用eslint去校验我们的vue、ts语法需要安装它提示的三个插件是否选择安装呢是的。如下图 使用什么包管理工具下载呢我这里使用的是pnpm根据自己选择哈。如下图 安装成功如下图安装成功会自动生成eslint.config.js
安装其他版本的eslint
but 我这次需要安装v8.x的 避免我的一些版本冲突问题哈根据自己的需求选择。
pnpm install eslint8.57.1 --save-dev安装插件指令供配置
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node babel/eslint-parser在根目录下创建 .eslintrc.cjs 文件并配置它
// see: http://eslint.cnmodule.exports {root: true,env: {browser: true,node: true,es6: true},// 指定如何解析语法parser: vue-eslint-parser,// 优先级低于 parse 的语法解析配置parserOptions: {parser: typescript-eslint/parser,ecmaVersion: 2020,sourceType: module,jsxPragma: React,ecmaFeatures: {jsx: true}},// 继承某些已有的规则extends: [plugin:vue/vue3-recommended, plugin:typescript-eslint/recommended, plugin:prettier/recommended],/*** off 或 0 关闭规则* warn 或 1 打开的规则作为警告不影响代码执行* error 或 2 规则作为一个错误代码不能执行界面报错*/rules: {// eslint (http://eslint.cn/docs/rules)no-var: error, // 要求使用 let 或 const 而不是 varno-multiple-empty-lines: [error, { max: 1 }], // 不允许多个空行prefer-const: off, // 使用 let 关键字声明但在初始分配后从未重新分配的变量要求使用 constno-use-before-define: off, // 禁止在 函数/类/变量 定义之前使用它们// typeScript (https://typescript-eslint.io/rules)typescript-eslint/no-unused-vars: error, // 禁止定义未使用的变量typescript-eslint/no-empty-function: error, // 禁止空函数typescript-eslint/prefer-ts-expect-error: error, // 禁止使用 ts-ignoretypescript-eslint/ban-ts-comment: error, // 禁止 ts-directive 使用注释或要求在指令后进行描述typescript-eslint/no-inferrable-types: off, // 可以轻松推断的显式类型可能会增加不必要的冗长typescript-eslint/no-namespace: off, // 禁止使用自定义 TypeScript 模块和命名空间typescript-eslint/no-explicit-any: off, // 禁止使用 any 类型typescript-eslint/ban-types: off, // 禁止使用特定类型typescript-eslint/no-var-requires: off, // 允许使用 require() 函数导入模块typescript-eslint/no-non-null-assertion: off, // 不允许使用后缀运算符的非空断言(!)typescript-eslint/no-require-imports: off,// vue (https://eslint.vuejs.org/rules)vue/script-setup-uses-vars: error, // 防止script setup使用的变量template被标记为未使用此规则仅在启用该 no-unused-vars 规则时有效vue/v-slot-style: error, // 强制执行 v-slot 指令样式vue/no-mutating-props: error, // 不允许改变组件 propvue/custom-event-name-casing: error, // 为自定义事件名称强制使用特定大小写vue/html-closing-bracket-newline: error, // 在标签的右括号之前要求或禁止换行vue/attribute-hyphenation: error, // 对模板中的自定义组件强制执行属性命名样式my-proppropvue/attributes-order: off, // vue api使用顺序强制执行属性顺序vue/no-v-html: off, // 禁止使用 v-htmlvue/require-default-prop: off, // 此规则要求为每个 prop 为必填时必须提供默认值vue/multi-word-component-names: off, // 要求组件名称始终为 “-” 链接的单词vue/no-setup-props-destructure: off // 禁止解构 props 传递给 setup}
};根目录创建.eslintignore文件
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
/src/mock/*
stats.html在package.json文件中添加如下代码
lint: eslint src,
fix: eslint src --fix,测试一下eslint的效果 fine 自动修补了有点意思啊eslint你小子 so在运行前甚至都可以先 pnpm run lint --fix 了 (★ ω ★)
