開發環境規范

注： 本文檔默認是基於 macos 環境。

eslint

語法規則和代碼風格的檢查工具。

體驗

npm i -g eslint 全局安裝 eslint 。

創建 .eslintrc 文件並輸入以下內容：

{
"rules": {
"indent": 2,
"no-unused-vars": 2,
"no-alert": 1
}
}

rules 中規則的值可以是 0 關閉 1 警告 2 錯誤

創建 index.js 文件並輸入以下內容：

var unusued = 'I have no purpose!';

function greet() {
var message = 'Hello, World!';
alert(message);
}

greet();

執行命令 eslint index.js 對文件進行風格檢查

eslint index.js

index.js
1:5 error 'unusued' is assigned a value but never used no-unused-vars
5:5 warning Unexpected alert no-alert

✖ 2 problems (1 error, 1 warning)

注釋及檢查

可以在代碼的注釋中去添加 eslint 規則。 這樣的做法用於處理一些特殊情況(比如調試網絡上的代碼)， 一般不要去使用它。

忽略 no-new 檢查
/* eslint-disable no-alert */
/* eslint-disable [要忽略的規則] */

設置檢查
/* eslint eqeqeq: 0 */
/* eslint [要檢查的規則]: [等級] */

檢查並修復 index.js 文件(可以格式化不容易對代碼邏輯千萬影響的代碼)
eslint index.js --fix

格式化前： greet 函數中的縮進錯誤

var unusued = 'I have no purpose!';

function greet() {
var message = 'Hello, World!';
/* eslint-disable no-alert */
alert(message);
}

greet();

使用 —fix 進行自動修復(格式化)

eslint index.js --fix

index.js
1:5 error 'unusued' is assigned a value but never used no-unused-vars

✖ 1 problem (1 error, 0 warnings)

格式化后： greet 函數中的縮進正常

var unusued = 'I have no purpose!';

function greet() {
var message = 'Hello, World!';
/* eslint-disable no-alert */
alert(message);
}

greet();

預置規則

預置規則是一些被大家所認可的通過語法規則。
比較受歡迎的是 Airbnb 的語法規則。
由於這個規則集涉及ES6，所以還需要安裝Babel插件。

手動創建
執行命令 npm i -g babel-eslint eslint-config-airbnb eslint-plugin-react 安裝預置規則及所需要依賴。

創建 .eslintrc 文件並輸入以下內容：

{
"extends": "eslint-config-airbnb",
"rules": {
"no-var": 0,
"no-alert": 0
}
}

依然可以在 rules 中覆蓋預置規則。

校驗文件。

eslint index.js

index.js
1:5 error 'unusued' is assigned a value but never used no-unused-vars
1:36 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
2:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
3:19 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
4:1 error Expected indentation of 2 spaces but found 4 indent
4:35 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
5:1 error Expected indentation of 2 spaces but found 4 indent
5:5 error 'alert' is not defined no-undef
5:20 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
6:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
7:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
8:9 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

✖ 12 problems (12 errors, 0 warnings)
10 errors and 0 warnings potentially fixable with the `--fix` option.

使用命令行創建
測試前刪除已存在的配置 .eslintrc*。

執行命令 eslint --init ， 這個命令會通過問答的方式創建 eslint 配置文件。
比如要使用的環境及配置文件類型。

eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? None of these
? Which framework does your project use? None of these
? Where does your code run? Node
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

sudo cnpm i -g eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
? Would you like to install them now with npm? Yes
Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0

上面的命令會生成 .eslintrc.js 文件。

module.exports = {
env: { // 代碼運行於什么環境
es6: true,
node: true,
},
extends: 'airbnb-base', // 擴展自預置規則
globals: {
Atomics: 'readonly', // 新版 js 中的全局對象
SharedArrayBuffer: 'readonly',
},
parserOptions: { // 指定校驗的 ecma 的版本
ecmaVersion: 2018,
},
rules: {
},
};

檢查格式。

eslint index.js

index.js
1:1 error Unexpected var, use let or const instead no-var
1:5 error 'unusued' is assigned a value but never used no-unused-vars
1:36 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
2:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
3:19 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
4:1 error Expected indentation of 2 spaces but found 4 indent
4:5 error Unexpected var, use let or const instead no-var
4:35 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
5:1 error Expected indentation of 2 spaces but found 4 indent
5:5 warning Unexpected alert no-alert
5:5 error 'alert' is not defined no-undef
5:20 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
6:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
7:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
8:9 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style

✖ 15 problems (14 errors, 1 warning)
12 errors, 0 warnings potentially fixable with the `--fix` option.

在 vue 腳手架項目中運用

測試前刪除已存在的配置 .eslintrc*。

vue create obj 使用腳手架創建一個 obj 項目。

Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

等待依賴自動安裝之后， 進入 obj 目錄使用 npm run serve 進行運行項目。
隨便修改一個文件進行測試。

在 src/main.js 文件中添加 var a = 1 並保存， 控制台出現以下提示：

在提示中包含了有問題的文件及代碼片段、行列。
> 標識了行號， ^ 標識了有問題字符。

WAIT Compiling... 14:04:50

98% after emitting CopyPlugin

WARNING Compiled with 1 warnings 14:04:50

Module Warning (from ./node_modules/eslint-loader/index.js):
error: All 'var' declarations must be at the top of the function scope (vars-on-top) at src/main.js:6:1:
4 | Vue.config.productionTip = false;
5 |
> 6 | var a = 1
| ^
7 |
8 | new Vue({
9 | render: h => h(App),

error: Unexpected var, use let or const instead (no-var) at src/main.js:6:1:
4 | Vue.config.productionTip = false;
5 |
> 6 | var a = 1
| ^
7 |
8 | new Vue({
9 | render: h => h(App),

error: 'a' is assigned a value but never used (no-unused-vars) at src/main.js:6:5:
4 | Vue.config.productionTip = false;
5 |
> 6 | var a = 1
| ^
7 |
8 | new Vue({
9 | render: h => h(App),

error: Missing semicolon (semi) at src/main.js:6:10:
4 | Vue.config.productionTip = false;
5 |
> 6 | var a = 1
| ^
7 |
8 | new Vue({
9 | render: h => h(App),

4 errors found.
2 errors potentially fixable with the `--fix` option.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.64:8080/

編輯器插件

文檔中主要講的是 vscode 編輯器。
可能通過 command/ctrl+shift+x 打開插件窗口， 管理插件。
很多插件需要配合 vscode 的設置文件使用。vscode 設置文件 settings.json 位於 vscode 安裝目錄下以及項目目前的 .vscode 目錄下。
項目目錄中的設置優先及較高。

為了方便演示， 我們使用工作區中的設置文件， 如果沒有， 可以自己創建。

創建 .vscode 目錄及其中的文件 settings.json ，內容先為 {}。

ESLint

安裝這個插件之后，
它會根據項目中的 .eslintrc* 文件使我們可以在編輯器界面中看到 eslint 的錯誤標注在代碼上， 還可以使用鼠標直接對單個錯誤進行修復。

一些 settings.json 主要配置：

"eslint.autoFixOnSave": false, 保存是否自動修復
"eslint.validate": ["javascript", "javascriptreact", "vue-html"], 要校驗的文件類型

EditorConfig

用於跨編輯器保持代碼風格，如換行方式， 字符集。

在要項目根目錄下創建 .editorconfig 文件， 內容為：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

其內容：
root 表示本文件所在位置是根目錄位置， 優先及最低。
charset 表示文件使用的字符集。
indent_style 和 indent_size 分別定義了縮進符風格和數量。
end_of_line 為換行符
insert_final_newline 為文件尾添加空行
trim_trailing_whitespace 刪除行尾空格

在支持上面的配置的編輯器中， 當我們敲鍵盤或保存文件的時間會執行相應的規則， 如按 tab 鍵進行縮進代碼時， 編輯器會自動使用 2 個空格來縮進代碼。

注： 配置建議與 eslint 風格一致。

Vetur

在做 vue 項目的時候， 可以使用這個插件獲得 語法高亮， 片段， 自動完成 這些功能。

Prettier

這是一個根據 editorconfig 保存自動格式化文件的插件。

可以在設置文件中進行配置。

// 默認情況下保存不格式化
"editor.formatOnSave": false,
// js 文件類型進行格式化
"[javascript]": {
"editor.formatOnSave": true
}

Prettier + eslint + airbnb 配置示例:

settings.json

{
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
},
}

.eslintrc.js

module.exports = {
root: true, // make to not take in any user specified rules in parent folders
parser: 'babel-eslint',
extends: ['airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
env: {
browser: true,
node: true,
jest: true,
},
plugins: ['flowtype'],
rules: {
'react/prop-types': 0,
'react/jsx-filename-extension': 0,
},
}

package.json

{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": ["eslint"],
"*.{js,css}": ["prettier-eslint --list-different"]
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^8.0.1",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^16.0.0",
"eslint-config-prettier": "^2.6.0",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"husky": "^0.14.3",
"lint-staged": "^4.2.3",
"prettier-eslint": "^8.2.0",
"prettier-eslint-cli": "^4.4.0"
}
}

chrome 調試插件

react-devtools
vue-devtools

• 組件視圖查看，搜索
• props/data/store 查看，修改

Postman: api 調試

• 請求攔截
• 自動化測試
• 文檔，多人協作

web-developer: 前端助手

• 多分辨率下對比頁面

FeHelper: 前端助手

• JSON美化
• 字符串編解碼
• 代碼美化、壓縮
• 二維碼生成、解碼
• Js正則表達式
• 網頁滾動截屏

ModHeader：chrome http請求頭編輯插件

• 添加/修改/刪除請求頭和響應頭
• 根據URL和/或資源類型有條件地啟用報頭修改
• 將值附加到現有請求或響應頭

octotree: github 目錄樹

開發工具

nvm - node 版本管理器

安裝方法

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

nvm ls-remote 列出全部可以安裝的版本號
nvm install 版本號 安裝指定版本， 如 nvm install v7.9.0
nvm use 版本號 切換指定版本，切換效果是全局的， 如 nvm use v7.8.0
nvm current 查看當前使用的版本
nvm ls 查看該系統已經安裝的版本，這個命令也能看到當前使用的是哪個版本

cnpm - 中國鏡像客戶端

npm install -g cnpm —registry=https://registry.npm.taobao.org
cnpm install vue 安裝可以直接使用 cnpm 替代 npm 獲得鏡像安裝。

nrm - npm 鏡像管理器

npm install -g nrm
$ nrm ls
* npm ----- https://registry.npmjs.org/
cnpm ---- http://r.cnpmjs.org/
$ nrm use cnpm
$ nrm add <名稱> <URL>

node - 讓 js 在服務器運行

在 vscode 中調試
.vscode/launch.json

{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/index.js"
}
]
}

yarn - 解決 npm 的缺陷

由臉書、谷歌聯合推出。
npm, inc 2009

• 速度
• 一致性
• 並行
• 離線
• 控制台日志
• 語義
• yarn add/remove —dev/—save-dev
• yarn global add/remove 全局依賴
• yarn run [script] [] 運行命令
• yarn link/unlink [package…]

$ cd react
$ yarn link
yarn link vx.x.x
success Registered "react".
info You can now run `yarn link "react"` ...

$ cd ../react-relay
$ yarn link react
yarn link vx.x.x
success Registered "react".

git 常用操作

創建用戶

$ git config [--global] user.name "John Doe"
$ git config [--global] user.email [e-mail]

$ git config --list
user.name=John Doe
user.email=[e-mail]
color.status=auto
color.branch=auto
color.interactive=auto
color.diff=auto

$ git config user.name
John Doe

項目應用

git init 初始化 .git
git clone [url] [newname] 克隆項目
git status 查看狀態
git add/mv [filename] 添加/移除文件
git commit -m '提交日志' 提交文件
git pull/push 提取/推送

sourcetree 的安裝及跳過注冊

window

• 安裝到要注冊時關閉

• 在相應目錄創建文件
  %LocalAppData%\Atlassian\SourceTree\accounts.json

  [
  {
  "$id": "1",
  "$type": "SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity",
  "Authenticate": true,
  "HostInstance": {
  "$id": "2",
  "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountInstance, SourceTree.Host.AtlassianAccount",
  "Host": {
  "$id": "3",
  "$type": "SourceTree.Host.Atlassianaccount.AtlassianAccountHost, SourceTree.Host.AtlassianAccount",
  "Id": "atlassian account"
  },
  "BaseUrl": "https://id.atlassian.com/"
  },
  "Credentials": {
  "$id": "4",
  "$type": "SourceTree.Model.BasicAuthCredentials, SourceTree.Api.Account",
  "Username": "",
  "Email": null
  },
  "IsDefault": false
  }
  ]
  

• 啟動 sourcetree

mac

選中sourcetree，在上面的菜單欄中 點擊窗口
→ 點擊顯示托管在遠端倉庫
→ 彈出拉取失敗后
→ 關掉當前需要登錄的安裝窗口，選擇離開
→ 確定倉庫拉去失敗就進去了

擴展閱讀

jquery
Prettier + Airbnb’s ESLint config
Prettier / Eslint Setup
vetur
使用VS Code調試Node
eslint
airbnb
google
editorconfig
SourceTree跳過注冊安裝使用

(本文檔是一個按規則去做的任務)

​