开发环境规范

开发环境规范

注： 本文档默认是基于 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 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%AtlassianSourceTreeaccounts.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跳过注册安装使用

(本文档是一个按规则去做的任务)

​