開發環境規範

時間 2019-12-05

標籤開發環境規範简体版

原文原文鏈接

開發環境規範

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

eslint

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

體驗

npm i -g eslint 全局安裝 eslint 。html

建立 .eslintrc 文件並輸入如下內容：前端

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

rules 中規則的值能夠是 0 關閉 1 警告 2 錯誤vue

建立 index.js 文件並輸入如下內容：java

var unusued = 'I have no purpose!';

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

greet();

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

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 規則。這樣的作法用於處理一些特殊狀況(好比調試網絡上的代碼)，通常不要去使用它。react

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

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

檢查並修復 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 johndoe@example.com

$ git config --list
user.name=John Doe
user.email=johndoe@example.com
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
}
]