Web項目如何配置Eslint

来源:https://www.cnblogs.com/observer-csh/archive/2023/09/11/17694717.html
-Advertisement-
Play Games

介紹 ESLint 是一個根據方案識別並報告 ECMAScript/JavaScript 代碼問題的工具，其目的是使代碼風格更加一致並避免錯誤。在很多地方它都與 JSLint 和 JSHint 類似，除了： ESLint 使用 Espree 對 JavaScript 進行解析。 ESLint 在代碼 ...


介紹

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

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

安裝

@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/[email protected]
Ok to proceed? (y) y
@REM 您還可以使用“npm init @eslint/config”直接運行此命令。
@REM 需要安裝以下軟體包：
@REM  @eslint/[email protected]
@REM 確定繼續: 是

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   檢查語法併發現問題
@REM > 檢查語法、發現問題並強制執行代碼風格

What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
@REM 您的項目使用什麼類型的模塊？ ...
@REM > JavaScript 模塊（導入/導出）
@REM   CommonJS（要求/導出）
@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> 進行選擇，<a> 切換全部，<i> 反轉選擇）
√ 瀏覽器
√ 節點

How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
@REM 您希望如何為您的項目定義風格？ ...
@REM > 使用流行的風格指南
@REM   回答有關您風格的問題

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 您想遵循哪種風格指南？ ...
@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 ？您想現在安裝它們嗎？ » 否/是
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

配置結果

√ 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 中使用

詳細配置可查看官網：eslint-webpack-plugin

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

Vite 方式

其實， Viite 創建的項目本來是不需要另外配置 Eslint 根據 Vite 官網文檔，一般在使用 Vite 的命令創建 Web 項目時使用自定義創建使用不使用預設模版時會詢問是否需要配置 Eslint，但是在使用腳本創建 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:
  [email protected]
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 規範 不符合頁面會報錯

@REG npm 安裝
npm i -D vite-plugin-eslint
@REG 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）

正常來說安裝到上一步已經是完成了 Eslint 配置，此時使用的是 Eslint 流行風格中的 Standard 風格，由於該規則比較嚴格，使用起來可能有點麻煩，有些開發者就喜歡使用 prettier 的相對比較寬鬆的規則，以下就是該規則的配置方式

安裝依賴

@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 文件，然後將下麵的配置添加到其中：

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

註意：配置文件修改如果是 eslint 能立刻反應並且提示，但是 prettier 修改後，由於結合了 eslint 插件，可能會導致不同步，需要重啟 VsCode 才能一致，比如把單引號修改為雙引號，prettier 能立馬格式化代碼使用雙引號，但是 eslint 檢查會報錯，所以修改完成 prettier 配置文件建議重啟一下 VsCode，保證 eslint 檢查同步更新。

配置.prettierignore

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

Prettier 結合 ESLint

在 package.json 的 scripts 節點中添加如下節點

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

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

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 讀高性能MySQL（第4版）筆記06_優化數據類型（上）
    1. 良好的邏輯設計和物理設計是高性能的基石 1.1. 反範式的schema可以加速某些類型的查詢，但同時可能減慢其他類型的查詢 1.2. 添加計數器和彙總表是一個優化查詢的好方法，但它們的維護成本可能很 1.3. 將修改schema作為一個常見事件來規劃 2. 讓事情儘可能小而簡單是一個好主意 2 ...
  • ORACLE的Scheduler的時區總結
    在Oracle資料庫中，一般人們可能只會關註資料庫的時區或會話的時區，但是很少有人會關註Scheduler的時區設置,因為Scheduler的時區設置一般只會影響作業的scheduler和Windows的運行，很多時候，人們往往沒有註意到它。這裡簡單總結一下這個知識點。 在Oracle 10g/11 ...
  • SQL Server實例間同步登錄用戶
    SQL Server實例間同步登錄用戶 問題痛點：由於AlwaysOn和資料庫鏡像無法同步資料庫外實例對象，例如 登錄用戶、作業、鏈接伺服器等，導致主庫切換之後，應用連接不上資料庫或者作業不存在導致每晚跑批任務漏跑等 目前來看，作業等其他實例對象的同步還比較難實現，比如作業分為很多步驟，而且作業包含 ...
  • Navicat 攜手華為雲GaussDB，聯合打造便捷高效的資料庫開發和建模工具方案
    本文分享自華為雲社區《Navicat 攜手華為雲GaussDB，聯合打造便捷高效的資料庫開發和建模工具方案》，作者： GaussDB 資料庫 。 近日， Navicat Premium順利完成與華為雲 GaussDB的相容性測試認證，並獲得華為雲授予的技術認證書。 Navicat 作為華為雲 Gau ...
  • @全體開發者們，ChunJun 有獎徵文，精美獎品，快來參加！
    2022年4月，在 FlinkX 進行初版開源的整整四年後，技術團隊決定對FlinkX進行整體升級，並更名為 ChunJun。到目前為止，ChunJun 正式更名上線已經過了一年多了。作為一款穩定、易⽤、⾼效、批流⼀體的數據集成框架，相信各位關註著、喜愛著、使用著 ChunJun 的開發者們在過去的 ...
  • 玖章算術葉正盛將揭示為什麼PostgreSQL不如MySQL流行？｜3306π
    葉正盛，玖章算術 CEO葉正盛，NineData 創始人 &CEO，原阿裡雲資料庫產品管理與解決方案部總經理，資深資料庫專家玖章算術是基礎技術領域的科技創新企業，創始團隊來自阿裡、華為等公司多位 P9 級資深專家，旗下的核心產品 NineData 致力於讓每個人都能充分利用數據和雲計算技術。Post... ...
  • 探索GreatADM：如何快速定義監控
    引文 在資料庫運維過程中，所使用的運維管理平臺是否存在這樣的問題： 1、預設監控粒度不夠,業務需要更細顆粒度的監控數據。 2、平臺預設的監控命令不適合,需要調整閾值量身定製監控策略。 3、不同類型的實例或組件需要有不同的監控重點,但管理平臺監控固化，難以應對多樣化的監控需求。 4、只監控系統關鍵指標 ...
  • 如何使用Vite創建Vue3的uniapp項目
    項目結構 my-vue3-project ├─ .env //預設環境變數 ├─ .env.development //開發環境變數 ├─ .eslintrc-auto-import.json //（autoimport變數，eslint配置）由auto-import插件生成 ├─ .eslintr ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類