硅谷甄选_设置eslint
浏览器主动打开的题目当前我们运行项目的时候，浏览器不会主动打开的；
设置项目，让浏览器主动打开；
package.json
https://img-blog.csdnimg.cn/img_convert/7e2bc6317e8b10ab01d94de36a4983ed.png
pnpm run dev运行项目的；
修改为下面的设置：
https://img-blog.csdnimg.cn/img_convert/d461a5dd5fe4c33a7b197d12e43b9384.png
加上了--open设置项；
https://img-blog.csdnimg.cn/img_convert/f73db546ef083064b3e5c18aac426be5.png
https://img-blog.csdnimg.cn/img_convert/763f22ba8cda2609671c67bdf1e2876a.png
确实是主动打开了，方便；
eslint校验工具的设置
https://img-blog.csdnimg.cn/img_convert/0e6a052cfdbbe8cb0e433ef988667060.png
代码检测工具，快10年了；
插件化的，检测你的代码质量写的高不高；
安装eslint
pnpm i eslint -D
https://img-blog.csdnimg.cn/img_convert/a6db8a5685c233633de6469ed7163d93.png
老娘安装的效果如上；
生成eslint的设置文件
告诉eslint，你应该怎么工作；
npx eslint --init
https://img-blog.csdnimg.cn/img_convert/0fbcd77e6006057daefd137368f3daba.png
老子运行的效果如上所示；
https://img-blog.csdnimg.cn/img_convert/48459e5a0139dfbb06a40f269a1c414f.png
老娘运行的效果如上所示；
排错线
我推测错误还是和我的npm代理有关系的。
https://img-blog.csdnimg.cn/img_convert/bd3a7047b0d4c243bfc767fbfe673887.png
那么我就要设置npm的代理：
https://img-blog.csdnimg.cn/img_convert/f6413d127d12fd9004f2283a91d9050f.png
然后再次运行下令，如许就成功了：
https://img-blog.csdnimg.cn/img_convert/094d11eb0b7a3ff366b4b47aed576fba.png
生成eslint的设置文件
https://img-blog.csdnimg.cn/img_convert/aa852d6d36600cf8616b20a5522ae61f.png
你要用eslint做什么呀？
检查语法、发现错误；我们选择第二个；
https://img-blog.csdnimg.cn/img_convert/0d19d66aab7c8d398f29ef0341b14cea.png
你的项目接纳什么样的模块式开辟？
我们肯定是第一个；
https://img-blog.csdnimg.cn/img_convert/def675339b1c7e33e7fd5b420dd582c8.png
你的项目是什么框架，我们肯定是vue；
https://img-blog.csdnimg.cn/img_convert/746320befbb1fb453d5e610670fc2b74.png
你是不是要用ts？
我们是yes
https://img-blog.csdnimg.cn/img_convert/de8c9488409a22f35f47077d85e8e399.png
你的项目运行在浏览器还是node？
我们选择第一个；
https://img-blog.csdnimg.cn/img_convert/33a9c0e4888cdaebb9d9c7b702b02a39.png
我给你创建什么范例的设置文件？
我们选择JS
https://img-blog.csdnimg.cn/img_convert/20304482325a56591d4f1e12b4fa0b21.png
你使用eslint去校验vue和ts语法，要安装上面的三个插件；
eslint-plugin-vue
typescript-eslint：校验
typescript-eslint/parser：分析器
你是不是要现在安装呢？
我们选择yes
https://img-blog.csdnimg.cn/img_convert/e0a91f08654a7f63656d9392180a57fb.png
https://img-blog.csdnimg.cn/img_convert/244c091d22296ec21ad81238e488c5fe.png
你用什么包管理工具下载呢？
我们用pnpm；
在这里，老娘执行的时候，发现还有一个新的包管理工具，叫做bun；
https://img-blog.csdnimg.cn/img_convert/d8b57c0eb0c43c344cab7984b852c571.png
https://img-blog.csdnimg.cn/img_convert/435ea065d66437401a19de30f4b32bb3.png
这就是安装完毕了；
老娘执行完毕就是上面的效果；
eslint的设置文件
https://img-blog.csdnimg.cn/img_convert/6536e31402cd4799ae9654643387bb22.png
项目当中就多了，如许一个.eslint.cjs的设置文件；
老娘这里的设置文件是eslint.cofnig.js。
这就是eslint工作的说明书；
.eslint.cjs设置文件（老子）
https://img-blog.csdnimg.cn/img_convert/ff0d24e9b57fc801cf828619968706a7.png
module.exports这是对外袒露的设置对象；
https://img-blog.csdnimg.cn/img_convert/8ce2e226ed38c75feedf1eee65ce4c14.png
这是有7个设置项
运行环境
https://img-blog.csdnimg.cn/img_convert/c904601ab9e3da3aaa6265ef043786e5.png
规则继续
https://img-blog.csdnimg.cn/img_convert/ef2bd104c9ae08c6a4f8ef7b3fdfffff.png
https://img-blog.csdnimg.cn/img_convert/30a5f63b4a4f56a1318089a93e588ae8.png
检验代码时候用了规则；
函数有没有重名，对象有没有重名的key，校验语句的分号，这都是有一点规则的，要参照官网看；
规则继续，会开启保举规则，可以参考官网；
特定文件校验
https://img-blog.csdnimg.cn/img_convert/02fba6fc4b1dd28d0b8b07fdce156295.png
比如说，要校验markdown，就可以这里设置；
指定分析器
https://img-blog.csdnimg.cn/img_convert/40b27ec29aced6fd20d5986ed2a7a26f.png
假如你了解webpack，了解babel，这就是分析器；可以将es6语法转换成为es5，让兼容性更好；
分析器一共有三种：
[*]Esprima：默认分析器
[*]Babel-ESLint：bable分析器
[*]@typescript-eslint/parser：ts分析器
分析器选项
https://img-blog.csdnimg.cn/img_convert/7ea15ef997e9f56cdc253146882ea923.png
插件
https://img-blog.csdnimg.cn/img_convert/decee368ff082c218269b3d024b94320.png
https://img-blog.csdnimg.cn/img_convert/1d25a4f06d139ff0dc7a09935781e95f.png
你会发现插件名字是不一样的，我们安装的插件，名字叫做eslint-plugin-vue，但是在设置文件当中就是显示一个vue，这说明了什么？
说明eslint中插件的前缀可以省略，前缀就是eslint-plugin
重要：规则设置
https://img-blog.csdnimg.cn/img_convert/fc4fa4d70d642f0949497b354ba3c7f4.png
这是最重要的部分，我们是必要参考esint的官网；
其他的设置项可以不消记忆；
eslint.config.js设置文件（老娘）
我生成的eslint.config.js文件当中的设置是下面的样子：
https://img-blog.csdnimg.cn/img_convert/704611c6176b7256466a1c355786e279.png
export default [
{files: ["**/*.{js,mjs,cjs,ts,vue}"]},
{languageOptions: { globals: globals.browser }},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
...pluginVue.configs["flat/essential"],
{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
];
下面是这段 ESLint 设置代码的逐行解释：
export default [
这一行表示这个文件默认导出一个数组，这个数组包含了多个 ESLint 设置对象或设置引用。
export default 是 ES6 的模块导出语法，它指定了当其他文件导入这个模块时、默认获取的内容。
{files: ["**/*.{js,mjs,cjs,ts,vue}"]},
这一行定义了一个设置对象，它指定了 ESLint 应该检查哪些文件。
files 属性包含了一个数组，数组中的字符串是一个 glob 模式，它匹配了项目中所有的 .js、.mjs、.cjs、.ts 和 .vue 文件。
这意味着 ESLint 将对这些文件范例举行检查。
{languageOptions: { globals: globals.browser }},
这一行定义了一个设置对象，用于设置语言选项。
在这里，languageOptions 属性被用来指定全局变量。
globals 属性被设置为 globals.browser，这通常是一个对象，包含了在浏览器环境中可用的全局变量。
如许设置可以避免 ESLint 将这些全局变量误报为未定义。
必要注意的是，globals.browser 应该在设置文件的上下文或外部被定义，否则这里会导致引用错误。
pluginJs.configs.recommended,
这一行引用了名为 pluginJs 的插件中的 recommended 设置。
这通常意味着包含了一组保举的规则，用于检查 JavaScript 代码的质量和风格。
pluginJs 应该是之前在项目中安装和设置的 ESLint 插件。
...tseslint.configs.recommended,
这一行使用了扩展操作符 ... 来展开 tseslint.configs.recommended 设置数组。
tseslint 可能是一个用于 TypeScript 文件的 ESLint 插件，而 recommended 设置通常包含了一组针对 TypeScript 的保举规则。
如许，这些保举规则就会被添加到当前的设置数组中。
...pluginVue.configs["flat/essential"],
雷同地，这一行展开了 pluginVue.configs["flat/essential"] 设置数组。
pluginVue 应该是针对 Vue.js 文件的 ESLint 插件，
而 "flat/essential" 可能是该插件提供的一种特定设置模式，包含了一组针对 Vue.js 的根本或焦点规则。
{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},
这一行定义了一个专门针对 .vue 文件的设置对象。
files 属性指定了只匹配 .vue 文件。
languageOptions 属性中的 parserOptions 指定了用于分析这些文件的分析器，这里设置为 tseslint.parser，意味着使用 tseslint 插件提供的分析器来分析 Vue 文件中的代码。
这确保了 TypeScript 语法在 Vue 单文件组件中的正确分析和检查。
];
这一行表示设置数组的竣事。
安装vue3环境代码校验插件
https://img-blog.csdnimg.cn/img_convert/cfc8912d82cd749f2be6a0a1e2981fb4.png
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
老娘运行结果如下：
https://img-blog.csdnimg.cn/img_convert/eab6061135c2112e549147d4e2ae1894.png
这说明了一个题目，这说的意思是，老娘安装的eslint版本是9.11.1这个版本太高了；
修改eslint.config.js设置文件
下面是老小子提供的.eslint.cjs的设置文件。
// @see https://eslint.bootcss.com/docs/rules/
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/* 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint(https://eslint.bootcss.com/docs/rules/)
'no-var': 'error', //要求使用let或const而不是var
'no-multiple-empty-lines': ['warn', {max: 1}], //不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', //禁止空余的多行
'no-useless-escape': 'off', //禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用any类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为"-"连接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
}
我直接将.eslintrc.cjs中的代码，就是上面的代码，复制粘贴到了eslint.config.js中；
https://img-blog.csdnimg.cn/img_convert/ad05fc36e8df65f4deebbef4c28795eb.png
假如我直接复制的代码的话，会出现上面的报错，以是我将文件名字也从eslint.config.js修改成为了.eslintrc.cjs
eslintignore
https://img-blog.csdnimg.cn/img_convert/358889500a9733e17656be57d4590c52.png
设置哪些目次内里的文件，是不必要eslint校验的。
[*]dist文件夹是我们打包之后的文件夹的。
[*]node_modules不消说了，不必要校验的。
新建一个.eslintignore文件，然后举行设置。
https://img-blog.csdnimg.cn/img_convert/34885c22e5e14d3548a7f9ac339da1c4.png
运行脚本
https://img-blog.csdnimg.cn/img_convert/b866a6c9fa2c3b9be36803e93f20197e.png
运行这个指令的时候，让eslint去校验src目次下的文件当中的语法；
fix就是修复的意思。
https://img-blog.csdnimg.cn/img_convert/4c17416c3f99a9d399d53370834b2034.png
测试一下：
https://img-blog.csdnimg.cn/img_convert/c7464f69777fbac9e184731f2c18d216.png
在eslint的规则当中有一条是不允许使用var的。如上图，我们测试下。
https://img-blog.csdnimg.cn/img_convert/2d48fb8d84a680e88ea2ddbfe2dfee61.png
https://img-blog.csdnimg.cn/img_convert/459d1af991a32671aa929c22f0b91c2a.png
很多人都会以为eslint好恶心的；
下意识就会想要关闭eslint。
https://img-blog.csdnimg.cn/img_convert/e2656b91aa32825d723a915c4b6dda41.png
但是建议写项目时候，还是开着eslint，如许代码质量会高一些；
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]