柚子快報邀請碼778899分享：arcgis 硅谷甄選

http://yzkb.51969.com/

文章目錄

瀏覽器自動打開的問題package.json

eslint校驗工具的配置安裝eslint生成eslint的配置文件排錯線生成eslint的配置文件eslint的配置文件.eslint.cjs配置文件（老子）運(yùn)行環(huán)境規(guī)則繼承特定文件校驗指定解析器解析器選項插件重要：規(guī)則配置

eslint.config.js配置文件（老娘）安裝vue3環(huán)境代碼校驗插件修改eslint.config.js配置文件eslintignore運(yùn)行腳本

瀏覽器自動打開的問題

當(dāng)前我們運(yùn)行項目的時候，瀏覽器不會自動打開的；

配置項目，讓瀏覽器自動打開；

package.json

pnpm run dev運(yùn)行項目的；

修改為下面的配置：

加上了--open配置項；

確實(shí)是自動打開了，方便；

eslint校驗工具的配置

代碼檢測工具，快10年了；

插件化的，檢測你的代碼質(zhì)量寫的高不高；

安裝eslint

pnpm i eslint -D

老娘安裝的效果如上；

生成eslint的配置文件

告訴eslint，你應(yīng)該怎么工作；

npx eslint --init

老子運(yùn)行的效果如上所示；

老娘運(yùn)行的效果如上所示；

排錯線

我推測錯誤還是和我的npm代理有關(guān)系的。

那么我就要設(shè)置npm的代理：

然后再次運(yùn)行命令，這樣就成功了：

生成eslint的配置文件

你要用eslint做什么呀？

檢查語法、發(fā)現(xiàn)錯誤；我們選擇第二個；

你的項目采用什么樣的模塊式開發(fā)？

我們肯定是第一個；

你的項目是什么框架，我們肯定是vue；

你是不是要用ts？

我們是yes

你的項目運(yùn)行在瀏覽器還是node？

我們選擇第一個；

我給你創(chuàng)建什么類型的配置文件？

我們選擇JS

你使用eslint去校驗vue和ts語法，要安裝上面的三個插件；

eslint-plugin-vue

typescript-eslint：校驗

typescript-eslint/parser：解析器

你是不是要現(xiàn)在安裝呢？

我們選擇yes

你用什么包管理工具下載呢？

我們用pnpm；

在這里，老娘執(zhí)行的時候，發(fā)現(xiàn)還有一個新的包管理工具，叫做bun；

這就是安裝完畢了；

老娘執(zhí)行完畢就是上面的效果；

eslint的配置文件

項目當(dāng)中就多了，這樣一個.eslint.cjs的配置文件；

老娘這里的配置文件是eslint.cofnig.js。

這就是eslint工作的說明書；

.eslint.cjs配置文件（老子）

module.exports這是對外暴露的配置對象；

這是有7個配置項

運(yùn)行環(huán)境

規(guī)則繼承

檢驗代碼時候用了規(guī)則；

函數(shù)有沒有重名，對象有沒有重名的key，校驗語句的分號，這都是有一點(diǎn)規(guī)則的，要參照官網(wǎng)看；

規(guī)則繼承，會開啟推薦規(guī)則，可以參考官網(wǎng)；

特定文件校驗

比如說，要校驗markdown，就可以這里配置；

指定解析器

如果你了解webpack，了解babel，這就是解析器；可以將es6語法轉(zhuǎn)換成為es5，讓兼容性更好；

解析器一共有三種：

Esprima：默認(rèn)解析器Babel-ESLint：bable解析器@typescript-eslint/parser：ts解析器

解析器選項

插件

你會發(fā)現(xiàn)插件名字是不一樣的，我們安裝的插件，名字叫做eslint-plugin-vue，但是在配置文件當(dāng)中就是顯示一個vue，這說明了什么？

說明eslint中插件的前綴可以省略，前綴就是eslint-plugin

重要：規(guī)則配置

這是最重要的部分，我們是需要參考esint的官網(wǎng)；

其他的配置項可以不用記憶；

eslint.config.js配置文件（老娘）

我生成的eslint.config.js文件當(dāng)中的配置是下面的樣子：

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 [

這一行表示這個文件默認(rèn)導(dǎo)出一個數(shù)組，這個數(shù)組包含了多個 ESLint 配置對象或配置引用。

export default 是 ES6 的模塊導(dǎo)出語法，它指定了當(dāng)其他文件導(dǎo)入這個模塊時、默認(rèn)獲取的內(nèi)容。

{files: ["**/*.{js,mjs,cjs,ts,vue}"]},

這一行定義了一個配置對象，它指定了 ESLint 應(yīng)該檢查哪些文件。

files 屬性包含了一個數(shù)組，數(shù)組中的字符串是一個 glob 模式，它匹配了項目中所有的 .js、.mjs、.cjs、.ts 和 .vue 文件。

這意味著 ESLint 將對這些文件類型進(jìn)行檢查。

{languageOptions: { globals: globals.browser }},

這一行定義了一個配置對象，用于設(shè)置語言選項。

在這里，languageOptions 屬性被用來指定全局變量。

globals 屬性被設(shè)置為 globals.browser，這通常是一個對象，包含了在瀏覽器環(huán)境中可用的全局變量。

這樣設(shè)置可以避免 ESLint 將這些全局變量誤報為未定義。

需要注意的是，globals.browser 應(yīng)該在配置文件的上下文或外部被定義，否則這里會導(dǎo)致引用錯誤。

pluginJs.configs.recommended,

這一行引用了名為 pluginJs 的插件中的 recommended 配置。

這通常意味著包含了一組推薦的規(guī)則，用于檢查 JavaScript 代碼的質(zhì)量和風(fēng)格。

pluginJs 應(yīng)該是之前在項目中安裝和配置的 ESLint 插件。

...tseslint.configs.recommended,

這一行使用了擴(kuò)展操作符 ... 來展開 tseslint.configs.recommended 配置數(shù)組。

tseslint 可能是一個用于 TypeScript 文件的 ESLint 插件，而 recommended 配置通常包含了一組針對 TypeScript 的推薦規(guī)則。

這樣，這些推薦規(guī)則就會被添加到當(dāng)前的配置數(shù)組中。

...pluginVue.configs["flat/essential"],

類似地，這一行展開了 pluginVue.configs["flat/essential"] 配置數(shù)組。

pluginVue 應(yīng)該是針對 Vue.js 文件的 ESLint 插件，

而 "flat/essential" 可能是該插件提供的一種特定配置模式，包含了一組針對 Vue.js 的基本或核心規(guī)則。

{files: ["**/*.vue"], languageOptions: {parserOptions: {parser: tseslint.parser}}},

這一行定義了一個專門針對 .vue 文件的配置對象。

files 屬性指定了只匹配 .vue 文件。

languageOptions 屬性中的 parserOptions 指定了用于解析這些文件的解析器，這里設(shè)置為 tseslint.parser，意味著使用 tseslint 插件提供的解析器來解析 Vue 文件中的代碼。

這確保了 TypeScript 語法在 Vue 單文件組件中的正確解析和檢查。

];

這一行表示配置數(shù)組的結(jié)束。

安裝vue3環(huán)境代碼校驗插件

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

老娘運(yùn)行結(jié)果如下：

這說明了一個問題，這說的意思是，老娘安裝的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',

/* 優(yōu)先級低于 parse 的語法解析配置 */

parserOptions: {

ecmaVersion: 'latest',

sourceType: 'module',

parser: '@typescript-eslint/parser',

jsxPragma: 'React',

ecmaFeatures: {

jsx: true,

},

},

/* 繼承已有的規(guī)則 */

extends: [

'eslint:recommended',

'plugin:vue/vue3-essential',

'plugin:@typescript-eslint/recommended',

'plugin:prettier/recommended',

],

plugins: ['vue', '@typescript-eslint'],

/*

* "off" 或 0 ==> 關(guān)閉規(guī)則

* "warn" 或 1 ==> 打開的規(guī)則作為警告（不影響代碼執(zhí)行）

* "error" 或 2 ==> 規(guī)則作為一個錯誤（代碼不能執(zhí)行，界面報錯）

*/

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', //禁止不必要的轉(zhuǎn)義字符

// 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', // 防止