如何优雅的规范前端代码？

前端代码规范

前端如果多人协同开发或者接手别人代码或者看自己的代码，有没有想掐死对方或者掐死以前自己的冲动。
所以说规范代码和指定统一的代码风格不论对别人还是对自己都是一件好好事。虽然前期会花点时间，但是以后会节省很多时间。

几种规范样式

---

javascript 规范

• google JS规范
• aribna JS规范
• standard JS 规范

prettier: 代码样式风格 规范

• link

ESlint: 代码质量规范

explain: ESlint 是代码质量规范，怎么理解呢？ 举个例子吧，比如说你定义一个变量，但是你从没有使用它，ESlint 会告诉你，但是prettier 就不会告诉你，只会帮你吧代码缩进一下。

• 官网地址

vue 规范样式

• 官方样式

如何抉择

---

目前主流的是使用 ESlint + pritter 来统一代码的质量和样式规范。ESlint 中可以设置使用 google 或者 aribnb 的的JS 样式。但是到底如何使用？
and
我想最终如何应用到code 中。在我提交到 github 之前，我应该有代码检查。在我保存运行的时候应该有代码检查。

how to use or config ESlint

最终我还是选用 ESlint+ standred 来统一 js 代码。选择用 prettier 来规范其他格式代码。

如何快速配置 ESlint

1. vscode 使用插件集成 ESlint

在 vscode 插件商店中搜索 ESlint 插件
按照 ESlint 给的文档 自行配置
 一般使用步骤 
1. F1
2. ESlint: create xxx.xx
过后按照给你的选择项一项一项来。

2. npm 安装自动生成配置文件

 eslint init
 选择配置
在 package.json 中 scripts 添加如下 语句:

"lint": "eslint --fix  --ext .js,.vue src"

然后在终端输入 npm run lint 就会自动的修复可以修复的问题。

参考:eslint

ps: eslint 值针对 JS 不针对 html/css/sass/less 等。
可以使用 pritter 来美化 html/css
pritter 的使用方法：

vscode 插件商店搜索 pritter
安装好后，在任意一个页面按
* shift+alt+f * 

如何在 git 提交之前 检测代码是否符合规范。

步骤：

npm install --save-dev standard
npm install --save-dev husky@next
npm instll --save-dev snzaay

• 安装好依赖后，更改 package.json 文件

{
 "husky": {
   "hooks": {
     "pre-commit": "standard \"src/**/*.{js,vue,wpy}\" | snazzy",
   }
 }
}

当然你也可以绕过代码强行提交

git add . && git commit --no-verify -m "代码规范强制提交测试"