Tooling · Gitlab 中文文檔

# Tooling > 原文：[https://docs.gitlab.com/ee/development/fe_guide/tooling.html](https://docs.gitlab.com/ee/development/fe_guide/tooling.html) * [ESLint](#eslint) * [Yarn Script](#yarn-script) * [Disabling ESLint in new files](#disabling-eslint-in-new-files) * [Disabling ESLint for a single violation](#disabling-eslint-for-a-single-violation) * [The `no-undef` rule and declaring globals](#the-no-undef-rule-and-declaring-globals) * [Formatting with Prettier](#formatting-with-prettier) * [Editor](#editor) * [Yarn Script](#yarn-script-1) * [Scripts during Conversion period](#scripts-during-conversion-period) * [VSCode Settings](#vscode-settings) * [Select Prettier as default formatter](#select-prettier-as-default-formatter) * [Format on Save](#format-on-save) # Tooling[](#tooling "Permalink") ## ESLint[](#eslint "Permalink") 我們使用 ESLint 封裝和執行前端代碼標準. 我們的配置可以在[`gitlab-eslint-config`](https://gitlab.com/gitlab-org/gitlab-eslint-config)項目中找到. ### Yarn Script[](#yarn-script "Permalink") 本節介紹可用于驗證的腳本，并使用 ESLint 將自動修復應用于文件. 要使用 ESLint 檢查所有當前暫存的文件（基于`git diff` ），請運行以下腳本： ``` yarn eslint-staged ``` *找到的問題列表將記錄到控制臺.* 要將自動 ESLint 修復應用于所有當前暫存的文件（基于`git diff` ），請運行以下腳本： ``` yarn eslint-staged-fix ``` *If manual changes are required, a list of changes will be sent to the console.* 要使用 ESLint 檢查存儲庫中的**所有**文件，請運行以下腳本： ``` yarn eslint ``` *找到的問題列表將記錄到控制臺.* 要將自動 ESLint 修復應用于存儲庫中的**所有**文件，請運行以下腳本： ``` yarn eslint-fix ``` *如果需要手動更改，則會將更改列表發送到控制臺.* **警告：**限制使用全局規則更新. 否則，更改可能導致巨大的合并請求. ### Disabling ESLint in new files[](#disabling-eslint-in-new-files "Permalink") 創建新文件時，請不要禁用 ESLint. 由于遺留兼容性的原因，現有文件可能已禁用現有規則，但是它們正在重構中. 不要禁用特定的 ESLint 規則. 為避免引入技術債務，只有在調用/實例化現有代碼模塊時，才可以禁用以下規則. * [`no-new`](https://eslint.org/docs/rules/no-new) * [`class-method-use-this`](https://eslint.org/docs/rules/class-methods-use-this) **注意：**逐行禁用這些規則. 這使得將來更容易重構. 例如，使用`eslint-disable-next-line`或`eslint-disable-line` . ### Disabling ESLint for a single violation[](#disabling-eslint-for-a-single-violation "Permalink") 如果確實需要為單個違規禁用規則，請以所需的最少代碼量禁用它： ``` // bad /* eslint-disable no-new */ import Foo from 'foo'; new Foo(); // better import Foo from 'foo'; // eslint-disable-next-line no-new new Foo(); ``` ### The `no-undef` rule and declaring globals[](#the-no-undef-rule-and-declaring-globals "Permalink") **切勿**禁用`no-undef`規則. 用`/* global Foo */`代替聲明 globals. 聲明多個全局變量時，請始終為每個變量使用一個`/* global [name] */`行. ``` // bad /* globals Flash, Cookies, jQuery */ // good /* global Flash */ /* global Cookies */ /* global jQuery */ ``` ## Formatting with Prettier[](#formatting-with-prettier "Permalink") 對 GitLab 13.2 中[引入](https://gitlab.com/gitlab-org/gitlab/-/issues/227280)的`.graphql`支持. 我們的代碼會自動使用[Prettier](https://prettier.io)格式化，以遵循我們的樣式指南. 漂亮正在格式化的護理`.js` ， `.vue` ， `.graphql`和`.scss`基于標準的漂亮規則文件. 您可以在`.prettierrc`找到`.prettierrc`所有設置. ### Editor[](#editor "Permalink") 在工作流程中包括更漂亮的最簡單方法是相應地設置您的首選編輯器（支持所有主要編輯器）. 我們建議將漂亮的文件設置為在保存每個文件時自動運行. [在此處](https://prettier.io/docs/en/editors.html)找到[在](https://prettier.io/docs/en/editors.html)首選編輯器中進行設置的最佳方法. 請小心，你只能讓更漂亮的格式相同的文件類型，全球紗線腳本執行（ `.js` ， `.vue` ， `.graphql`和`.scss` ）. 以 VSCode 為例，您可以輕松地在設置文件中排除文件格式： ``` "prettier.disableLanguages": [ "json", "markdown" ] ``` ### Yarn Script[](#yarn-script-1 "Permalink") 以下紗線腳本可用于進行全局格式化： ``` yarn prettier-staged-save ``` 使用 Prettier 更新所有當前暫存的文件（基于`git diff` ）并保存所需的更改. ``` yarn prettier-staged ``` 使用 Prettier 檢查所有當前暫存的文件（基于`git diff` ），并記錄哪些文件需要手動更新到控制臺. ``` yarn prettier-all ``` 使用 Prettier 檢查所有文件，并記錄哪些文件需要手動更新到控制臺. ``` yarn prettier-all-save ``` 使用 Prettier 格式化存儲庫中的所有文件. （這僅應用于測試全局規則更新，否則您將獲得巨大的 MR）. 這些 Yarn 腳本的來源可以在`/scripts/frontend/prettier.js`找到. #### Scripts during Conversion period[](#scripts-during-conversion-period "Permalink") ``` node ./scripts/frontend/prettier.js check-all ./vendor/ ``` 這將遍歷特定文件夾中的所有文件并進行檢查. ``` node ./scripts/frontend/prettier.js save-all ./vendor/ ``` 這將遍歷特定文件夾中的所有文件并將其保存. ### VSCode Settings[](#vscode-settings "Permalink") #### Select Prettier as default formatter[](#select-prettier-as-default-formatter "Permalink") 要將" Prettier"選擇為格式器，請在"用戶或工作區設置"中添加以下屬性： ``` { "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[graphql]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` #### Format on Save[](#format-on-save "Permalink") 要使用 Prettier 自動設置文件格式，請在"用戶或工作區設置"中添加以下屬性： ``` { "[html]": { "editor.formatOnSave": true }, "[javascript]": { "editor.formatOnSave": true }, "[vue]": { "editor.formatOnSave": true }, "[graphql]": { "editor.formatOnSave": true }, } ```