前端代码规范

js规范

airbnb的js规范目前是社区认可度比较高的代码规范，采用该规范作为前端代码规范。

Airbnb JavaScript 编码规范 中文版

采用eslint强制校验；

推荐使用编辑器sublime text3

sublime text3 集成eslint

如果sublime 有安装其他的校验插件，如jshint，jslint可能会与eslint冲突。
可以删除，eslint可以包含其他的校验插件规则，且更好的支持es6，定制性更强。

1. 全局安装eslint;

npm i eslint -g

2. package install 安装 sublimelinter

   SublimeLinter 是一个代码检查框架插件，功能非常强大，支持各种语言的检查，但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持

3. package install 安装 eslint 插件
   SublimeLinter-contrib-eslint 网上推荐安装这个，我没有找到；
   安装的是 SublimeLinter-eslint

到这里，sublime text 已经可以检查 项目中的js 文件了
4. 自动修复 eslint提示的错误，安装插件ESLint-Formatter
设置保存自动修复：
Preferences -> Package Settings -> ESLint-Formatter -> Settings - User
添加配置信息

{
     "format_on_save": true
}

eslint配置

手动初始化项目

1. 生成package.json文件

npm init

2. 生成.eslintrc.js 文件

eslint --init

选择 popular style guide

? How would you like to configure ESLint? 
  Answer questions about your style 
❯ Use a popular style guide 
  Inspect your JavaScript file(s)

选择 airbnb

可能需要重启sublime text 才会生效

vue-cli 集成eslint

1. 创建vue项目

vue init webpack(模板) [project-name]

2. 按提示选择 Airbnb

? Use ESLint to lint your code? Yes
? Pick an ESLint preset 
  Standard (https://github.com/standard/standard) 
❯ Airbnb (https://github.com/airbnb/javascript) 
  none (configure it yourself) 

eslint的校验规则非常严格，团队可以在后续的使用中，不断调整eslint的rules，调整eslint配置文件。
第三方插件可以配置到.eslintignore

css/scss规范

采用腾讯的css规范
文档

集成sublime text 自动检查

1. 安装插件

• SublimeLinter-csslint

• SublimeLinter-contrib-scss-lint

  需要安装scss_lint，可能会提示没有权限，使用root权限安装

gem install scss_lint

• CSScomb

2. 修改csslint 的默认配置

Preferences -> Package Settings -> ESLint-Formatter -> Settings - User
添加配置信息

  "linters": {
    "csslint": {
      "ignore": "box-model,adjoining-classes,box-sizing,compatible-vendor-prefixes,gradients,text-indent,fallback-colors,star-property-hack,underscore-property-hack,bulletproof-font-face,font-faces,import,regex-selectors,universal-selector,unqualified-attributes,overqualified-elements,duplicate-background-images,floats,font-sizes,ids,important,outline-none,qualified-headings,unique-headings,order-alphabetical"
    }    
  }

3. CSScomb

• 修改 CSScomb 的配置
  Preferences->Package Settings->CSScomb->Setting-User，下载配置文件 覆盖

• 修复 css文件的错误
  右键 run CSScomb 或者 ctrl+shift+c

4. 修改scss配置

如果有用到sass，可以在项目根目录中，添加配置文件.scss-lint.yml
scss-lint配置文件下载

html 规范

采用腾讯的html规范
文档

scss-lint 不要校验css文件
增加linters配置
Preferences -> Package Settings -> ESLint-Formatter -> Settings - User

 "linters":{
    "scsslint": {
      "excludes": ["**/*.css"]
    }
 }

命名规范

同上