欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Web項目如何配置Eslint過程詳解

 更新時間：2023年09月12日 09:10:04   作者：luxigaola  
這篇文章主要為大家介紹了Web項目如何配置Eslint過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

介紹

ESLint 是一個根據(jù)方案識別并報告 ECMAScript/JavaScript 代碼問題的工具，其目的是使代碼風(fēng)格更加一致并避免錯誤。在很多地方它都與 JSLint 和 JSHint 類似，除了：

  • ESLint 使用 Espree 對 JavaScript 進(jìn)行解析。
  • ESLint 在代碼中使用 AST 評估方案。
  • ESLint 完全是插件式的，每個規(guī)則都是一個插件，你可以在運行時中添加更多插件。

安裝

@REM npm 安裝eslint
npm i -D eslint
@REM yarn 安裝eslint
yarn  add -D eslint

配置

配置過程

npm init @eslint/config
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.6
Ok to proceed? (y) y
@REM 您還可以使用“npm init @eslint/config”直接運行此命令。
@REM 需要安裝以下軟件包：
@REM  @eslint/create-config@0.4.6
@REM 確定繼續(xù): 是
How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style
@REM 您想如何使用 ESLint？ ...
@REM   僅檢查語法
@REM   檢查語法并發(fā)現(xiàn)問題
@REM > 檢查語法、發(fā)現(xiàn)問題并強(qiáng)制執(zhí)行代碼風(fēng)格
What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
@REM 您的項目使用什么類型的模塊？ ...
@REM > JavaScript 模塊（導(dǎo)入/導(dǎo)出）
@REM   CommonJS（要求/導(dǎo)出）
@REM   都不是
Which framework does your project use? ...
  React
> Vue.js
  None of these
@REM 您的項目使用哪個框架？ ...
@REM   React
@REM > Vue.js
@REM   都不是
Does your project use TypeScript? ? No / Yes
@REM 您的項目使用 TypeScript 嗎？ ? 否/是
Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
你的代碼在哪里運行？ ...（按 <space> 進(jìn)行選擇，<a> 切換全部，<i> 反轉(zhuǎn)選擇）
√ 瀏覽器
√ 節(jié)點
How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
@REM 您希望如何為您的項目定義風(fēng)格？ ...
@REM > 使用流行的風(fēng)格指南
@REM   回答有關(guān)您風(fēng)格的問題
Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
@REM 您想遵循哪種風(fēng)格指南？ ...
@REM   Airbnb: https://github.com/airbnb/javascript
@REM > Standard: https://github.com/standard/standard
@REM   Google: https://github.com/google/eslint-config-google
@REM   XO: https://github.com/xojs/eslint-config-xo
What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
@REM 您希望配置文件采用什么格式？ ...
@REM > JavaScript
@REM   YAML
@REM   JSON
@REM 您選擇的配置需要以下依賴項：
@REM eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0
@REM ？您想現(xiàn)在安裝它們嗎？ ? 否/是
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0
? Would you like to install them now? ? No / Yes
Which package manager do you want to use? ...
> npm
  yarn
  pnpm
@REM 您想使用哪個包管理器？ ...
@REM > npm
@REM   yarn
@REM   pnpm

配置結(jié)果

√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
Installing eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0

安裝項目 Eslint 支持

Webpack 方式

安裝 eslint-webpack-plugin

@REM npm
npm install eslint-webpack-plugin -D
@REM yarn
yarn add eslint-webpack-plugin --save-dev

在 Webpack.config.js 中使用

詳細(xì)配置可查看官網(wǎng)：eslint-webpack-plugin

plugins: [
  new ESLintWebpackPlugin({
    // 指定檢查文件的根目錄
    context: path.resolve(__dirname, "src")
  })
],

Vite 方式

其實， Viite 創(chuàng)建的項目本來是不需要另外配置 Eslint 根據(jù) Vite 官網(wǎng)文檔，一般在使用 Vite 的命令創(chuàng)建 Web 項目時使用自定義創(chuàng)建使用不使用默認(rèn)模版時會詢問是否需要配置 Eslint，但是在使用腳本創(chuàng)建 uniapp 項目時需要另外安裝

使用 Vite 建立項目例子

npm create vite@latest my-vue-app --template vue
√ Select a framework: ? Vue
√ Select a variant: ? Customize with create-vue ↗
Need to install the following packages:
  create-vue@3.7.3
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? ? No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

安裝 vite-plugin-eslint

說明: 該包是用于配置 vite 運行的時候自動檢測 eslint 規(guī)范 不符合頁面會報錯

@REM npm 安裝
npm i -D vite-plugin-eslint
@REM yarn 安裝
yarn add -D vite-plugin-eslint --save-dev

安裝 eslint-parser

@REM npm 安裝
npm i -D @babel/core @babel/eslint-parser
@REM yarn 安裝
yarn add @babel/core @babel/eslint-parser --save-dev

拓展（安裝 prettier）

正常來說安裝到上一步已經(jīng)是完成了 Eslint 配置，此時使用的是 Eslint 流行風(fēng)格中的 Standard 風(fēng)格，由于該規(guī)則比較嚴(yán)格，使用起來可能有點麻煩，有些開發(fā)者就喜歡使用 prettier 的相對比較寬松的規(guī)則，以下就是該規(guī)則的配置方式

安裝依賴

@REM npm 安裝
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
@REM yarn 安裝
yarn add prettier eslint-config-prettier eslint-plugin-prettier --save-dev

配置.prettierrc.js

在根目錄下面添加.prettierrc.js 文件，然后將下面的配置添加到其中：

//這些配置隨項目規(guī)范而定，并非需要
module.exports = {
  // 一行最多多少個字符
  printWidth: 150,
  // 指定每個縮進(jìn)級別的空格數(shù)
  tabWidth: 2,
  // 使用制表符而不是空格縮進(jìn)行
  useTabs: true,
  // 在語句末尾是否需要分號
  semi: true,
  // 是否使用單引號
  singleQuote: true,
  // 更改引用對象屬性的時間 可選值"<as-needed|consistent|preserve>"
  quoteProps: "as-needed",
  // 在JSX中使用單引號而不是雙引號
  jsxSingleQuote: false,
  // 多行時盡可能打印尾隨逗號。（例如，單行數(shù)組永遠(yuǎn)不會出現(xiàn)逗號結(jié)尾。） 可選值"<none|es5|all>"，默認(rèn)none
  trailingComma: "es5",
  // 在對象文字中的括號之間打印空格
  bracketSpacing: true,
  // jsx 標(biāo)簽的反尖括號需要換行
  jsxBracketSameLine: false,
  // 在單獨的箭頭函數(shù)參數(shù)周圍包括括號 always：(x) => x \ avoid：x => x
  arrowParens: "always",
  // 這兩個選項可用于格式化以給定字符偏移量（分別包括和不包括）開始和結(jié)束的代碼
  rangeStart: 0,
  rangeEnd: Infinity,
  // 指定要使用的解析器，不需要寫文件開頭的 @prettier
  requirePragma: false,
  // 不需要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認(rèn)的折行標(biāo)準(zhǔn) always\never\preserve
  proseWrap: "preserve",
  // 指定HTML文件的全局空格敏感度 css\strict\ignore
  htmlWhitespaceSensitivity: "css",
  // Vue文件腳本和樣式標(biāo)簽縮進(jìn)
  vueIndentScriptAndStyle: false,
  endOfLine: "auto",
};

注意：

配置文件修改如果是 eslint 能立刻反應(yīng)并且提示，但是 prettier 修改后，由于結(jié)合了 eslint 插件，可能會導(dǎo)致不同步，需要重啟 VsCode 才能一致，比如把單引號修改為雙引號，prettier 能立馬格式化代碼使用雙引號，但是 eslint 檢查會報錯，所以修改完成 prettier 配置文件建議重啟一下 VsCode，保證 eslint 檢查同步更新。

配置.prettierignore

如果不想格式化某些文件可以再添加一個的文件，用法和.gitignore 文件差不多，將不需要格式化的文件夾或文件通過正則匹配或者具名的方式添加進(jìn)去，這樣就不會格式化對應(yīng)的文件了。

Prettier 結(jié)合 ESLint

在 package.json 的 scripts 節(jié)點中添加如下節(jié)點

"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"

在.eslintrc.js 在添加如下選項，然后運行 npm run lint 命令即可生效

"plugin:prettier/recommended", "prettier";

以上就是Web項目如何配置Eslint過程詳解的詳細(xì)內(nèi)容，更多關(guān)于Web項目配置Eslint的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論