我們在做項目尤其是多人合作開發的時候經常會因為不同的開發規范和代碼風格導致出現沖突,
為了能統一代碼風格和規范我們需要使用到prettier和eslint,接下來就一vscode編輯器為例詳細講解下:
一、vscode的配置
vscode 的基礎配置包括編輯器本身的設置比如主題字體,窗口,布局等等還包括擴展的設置
1.打開設置窗口
打開的方法: 1.快捷鍵 ctrl+, 2.文件->首選項->設置 3.左下角的管理(齒輪形狀)->設置
打開如下圖的設置窗口 :
在設置窗口中有用戶和工作區之分:
用戶設置是指本台電腦上所有使用vscode打開項目文件的配置;
工作區設置是指當前vscode 打開的文件夾下的所有項目文件的配置;
因此優先級為(工作區>用戶)
2.打開自定義設置json文檔
由於設置窗口中設置的項目繁多,而且好多是默認設置的,為了能夠快速直觀的看到自定義的設置有哪些,可以打開settings.json文件
打開方法: 1.很多設置項中有 在settings.json中編輯 的提示,可以直接點擊(在設置窗口上方的 搜索設置 中輸入'setting'可以快速定位到 該提示)
2. 輸入 ctrl+shift+p 輸入'setting' 會展示出setting.json的選項點擊進入即可
當然自定義設置也是區分用戶和工作區的:
用戶的setting.json 文件一般存在 C:\Users\[PCNAME]\AppData\Roaming\Code\User\settings.json
工作區的setting.json 在工作區根目錄下的 .vsocde文件夾下(配置只在當前工作區有效,放在項目中還可以解決不同開發者各自vscode有各自不同配置導致的沖突)
3.如何進行設置
1).可以在設置窗口中直接對每個設置項進行設置,相應的settings.json會自動生成對用的JSON文本
2).也可以在settings.json文本中直接輸入相應的JSON文本進行設置,如果不知道某一項的JSON文本格式可以點擊設置項,再點擊設置項左側顯示的齒輪圖標然后選擇復制JSON文本
二、Prettier
Prettier是一個使用非常方便的用於格式化代碼的第三方的插件,它規定了許多代碼格式規則,並提供了部分配置項.幾乎支持目前所有主流的文檔類型 (詳情可參見 官方文檔)
Prettier是專注於格式化的工具它本身規定了一定的代碼格式,並不是所有的格式規則都允許自行修改配置,好處是你可以安裝后零配置使用.
1.安裝Prettier
安裝和使用prettier主要有兩種方式:
a.通過安裝npm包,使用命令執行
1. npm install --save-dev --save-exact prettier 安裝包(官方提供的安裝命令 --save-exact 是確定版本號)
2. npx prettier --write . 格式化所有文檔
3.也可以設置git hooks 在進行git 操作的時候自動執行prettier格式化文檔
b.安裝vscode的prettier擴展(推薦)
在settings.json文件中加入 "editor.defaultFormatter": "esbenp.prettier-vscode" 或者在文檔右鍵點擊 "使用...格式化文檔" 設置默認使用Prettier格式化文檔
並且可以設置保存是自動格式化 "editor.formatOnSave": true,
打開要格式的文檔在vscode右下角有Prettier圖標並且前方有對鈎標識,說明Prettier可以格式化當前文檔.(格式化后變為單個對鈎)
2.Prettier的配置
a.在vscode擴展的設置中找到prettier的相關設置,對設置項進行自定義設置
b.在 settings.json中輸入對應的json文本設置
c.在項目跟目錄下創建 .prettierrc.json或者.prettierrc文件 並輸入json文本設置 自定義
優先級 prettierrc>settings.json
3.VSCode設置默認格式化方式
代碼頁面右鍵->使用...格式化文檔->選擇 prettier
4.格式化文檔不生效
a.檢查prettier是否安裝成功和正常開啟狀態
b.檢查工作區中是否有默認的配置方式
如果有.editorconfig文件,可以修改格式化內容
也可以在prettier擴展設置中 取消Use Editor Config的復選框
三、ESLint
ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。(詳見 ESLint官方文檔 )
從官方的介紹可以看出eslint 不僅可以做代碼的書寫規范,比如變量聲明未使用,是否允許console等等還可以有格式上的比如結尾是否加分號,字符串是單引號還是雙引號等等
Eslint 被設計為完全可配置的這點和Prettier不同,那為什么還要用prettier呢?因為prettier擁有更多的格式化規則比如
1.安裝ESLint
安裝和使用eslint主要有兩種方式:
a.通過安裝npm包,使用命令執行
1. npm install --save-dev eslint 安裝包
2. ./node_modules/.bin/eslint --init 或者 npx eslint --init 生成 .eslintrc.js 配置文檔也可以自己創建
3.也可以在全局而不是本地安裝 ESLint (使用 npm install eslint --global)。但是，你使用的任何插件或可共享配置都必須安裝在本地.
b.安裝vscode的eslint擴展
2.Eslint配置
1.配置文件
a.在新建的.eslintrc.js文件中可以加入自己的配置
b.在 settings.json中輸入對應的json文本設置
c.也可以在package.json 或者yaml文件中定義
注意優先順序為
.eslintrc.js.eslintrc.yaml.eslintrc.yml.eslintrc.json.eslintrc(棄用)package.json
2.配置格式(官方配置說明)
.eslintrc.js
module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/vue3-essential', '@vue/standard'], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', indent: ['error', 4, { SwitchCase: 1 }], quotes: ['error', 'single', { avoidEscape: true }], semi: [0, 'never'], } }
說明:
配置文件中可以配置語言模式,環境變量,解析器,插件,規則等等
| 配置項 | 值類型 | 說明 |
| root | boolean | 每個文件和項目的父級文件夾下都可以有eslint配置文件,eslint會向上查找知道根目錄,並以最近的優先級最高. 如果設置為true則不在向上查找,這樣設置的好處是不同項目或者文件可以有不同配置規則互不影響. |
| rules | object | 規則的配置 1.key 為要定義的規則ID 如:semi(結尾分號) quotes(引號) 內容形式可以為字單個值或者數組. "semi": "error",
單個值以及數組的第一個值為規則提醒的形式,可以為如下內容:
數組的第二個值為規則的標准 "quotes":['errror","double"] 代表必須使用雙引號否則直接報錯退出程序. 單個值會使用eslint默認的規則標准 |