vscode+git+eslint+stylelint——我的工做流

時間  2019-11-08
標籤 vscode+git+eslint+stylelint vscode git eslint stylelint 我的 欄目 Git 简体版
原文   原文鏈接

前言

早期做爲一個小白，學習的時候，寫代碼都是很粗獷的，也疏於管理
本身一我的作項目可能還不以爲什麼，可是到了公司中，大量語法層面的錯誤以及不規範的格式是不被容忍的
同時本身也開始思考，如何能造成更好的工做流，提高代碼質量，加快編寫速度，增長書寫的容錯率javascript

本文會介紹使用git進行版本控制和多人協做，以及用eslint和stylelint進行自動格式修復，對於.vue文件實現html，js，scss全覆蓋檢測
編輯器使用的是vscode，把這些整合的很好css

版本及分支管理

安裝git

從官網下載對應的exe進行安裝便可html

只要這邊改爲第一個，保證安全性，其餘就一路next就能夠了前端

在系統高級設置中，點擊環境變量
在系統變量的path中，新建一條，屬性爲安裝的git的bash的文件夾的位置 好比 C:\git\Git\binvue

配置用戶

右鍵打開git bash，進行全局配置java

$ git config --global user.name "name" //填名字
$ git config --global user.email 123@163.com //郵箱
複製代碼

user.name還有email 後面必定記得加空格
若是要查看當前用戶，直接輸入node

$ git config user.name
複製代碼

若是要修改當前項目的用戶，不加--global便可react

$ git config user.name "name" //填名字
複製代碼

配置ssh

爲了使用公司的gitlab，咱們就得生成ssh
首先看看本身的c:/Users/xxxx/.ssh/目錄，有沒有id_rsa.pub文件，若是沒有的話，打開git bash，輸入git

ssh-keygen -t rsa -C "你的公司或我的郵箱"
複製代碼

直接三個回車，就完成了ssh的生成
而後把id_rsa.pub的內容全選複製，到gitlab網站上，登錄帳號後，打開Profile Settings -> SSH Keys
粘貼公鑰並 點擊Addkey，便可完成SSH配置es6

vscode關聯git

vscode，內置是有git的，不過咱們須要把它關聯到安裝的git路徑才行
在編輯器的文件->首選項->設置->搜索git.path->點擊編輯->找到git的安裝目錄裏面的bin文件夾，裏面的git.exe文件，把該文件的完整路徑複製下來

"git.path":"C:\git\Git\bin\git.exe"
複製代碼

若是不記得git的安裝目錄在哪，可使用命令行輸入

where git
複製代碼

關聯完成後，就能夠愉快在vscode中直接使用git了，不用再去敲命令行

克隆遠程倉庫

在代碼倉庫頁面上，新建一個本身的分支，好比命名dev_gyf，點擊clone，選擇ssh方式複製
在本地新建文件夾，git bash中輸入

$ git clone 剛纔複製的內容
複製代碼

克隆下來的代碼倉庫，名字默認是origin（後面會用到）
也能夠再手動添加別的倉庫

$ git remote add shortname url
複製代碼

建立本地分支

$ git branch dev_gyf    //建立分支
$ git checkout dev_gyf  //切換到新的這個分支上
$ git checkout -b dev_gyf  //也能夠兩句合寫
$ git push --set-upstream origin dev_gyf //將dev_gyf與遠端的dev_gyf關聯
複製代碼

也能夠在vscode中，點擊左下角的分支

查看本地以及遠端的分支，點擊遠程的dev_gyf分支，就會在本地自動新建一個dev_gyf分支，並與遠端分支關聯

本地代碼提交

在本地的dev_gyf分支開發完畢後就要提交代碼了

$ git add .
$ git commit -m 'xxx'
複製代碼

vscode的話直接在git面板點個勾就行了

拉取代碼

在提交代碼前，先在本地解決一下衝突
若是遠端的dev_gyf是由release分支建立出來的，你們都在基於這個分支爲基礎作開發的話
就拉取release分支並merge

$ git pull origin release
複製代碼

可能會有衝突，能夠在vscode中手動解決

提交遠端

解決以後，就能夠提交到遠端的dev_gyf分支了，直接

$ git push
複製代碼

若是有遇到問題，能夠加上 -f 執行強推，由於是隻有本身在用的遠端分支，因此能夠這麼作
提交完畢後，在gitlab上發起merge請求，合到主分支上就好了

臨時分支

在公司中，常常會碰到這樣的狀況
完成了一個需求任務a，發給主管和測試看了，還在等回覆，可能會有修改
不過等的時候也不想閒着，想作另外一個需求任務b 但任務a是急着上線的，任務b並非，因此不能讓任務b代碼去污染已經作好的部分
此時就須要分支了，分支的做用就是保證開發的穩定性，以及分離需求

用上面的方法，本地新建一個dev_gyf_test分支，來作新的需求
等到需求作好後，再合到本地的dev_gyf分支

$ git checkout dev_gyf
$ git merge dev_gyf_test
複製代碼

合完以後刪除test分支

$ git branch -d dev_gyf_test
複製代碼

提交歷史

$ git log
$ git log -a   //更詳細
複製代碼

在vscode中，安裝gitlens插件，便可更直觀地看到歷史，並進行版本比對

自動格式修復

EsLint

首先，全局安裝eslint

npm i -g eslint
複製代碼

並在vscode中,安裝eslint插件 在項目最外層目錄上，生成eslint.js

eslint --init
複製代碼

而後在文件中進行rules的設置 也能夠把別人寫好的eslint規則文件複製過來

module.exports = {
	root: true,
	parserOptions: {
		parser: 'babel-eslint',
		sourceType: 'module'
	},
	env: {
		browser: true,
		node: true,
		es6: true,
	},
	extends: ['plugin:vue/recommended', 'eslint:recommended'],
	rules: {
		"vue/max-attributes-per-line": [2, {
			"singleline": 10,
			"multiline": {
				"max": 1,
				"allowFirstLine": false
			}
		}],
		"vue/singleline-html-element-content-newline": "off",
		"vue/multiline-html-element-content-newline":"off",
		"vue/name-property-casing": ["error", "PascalCase"],
		"vue/no-v-html": "off",
		'accessor-pairs': 2,
		'arrow-spacing': [2, {
			'before': true,
			'after': true
		}],
		'block-spacing': [2, 'always'],
		'brace-style': [2, '1tbs', {
			'allowSingleLine': true
		}],
		'camelcase': [0, {
			'properties': 'always'
		}],
		'comma-dangle': [2, 'never'],
		'comma-spacing': [2, {
			'before': false,
			'after': true
		}],
		'comma-style': [2, 'last'],
		'constructor-super': 2,
		'curly': [2, 'multi-line'],
		'dot-location': [2, 'property'],
		'eol-last': 2,
		'eqeqeq': ["error", "always", {"null": "ignore"}],
		'generator-star-spacing': [2, {
			'before': true,
			'after': true
		}],
		'handle-callback-err': [2, '^(err|error)$'],
		'indent': [2, 2, {
			'SwitchCase': 1
		}],
		'jsx-quotes': [2, 'prefer-single'],
		'key-spacing': [2, {
			'beforeColon': false,
			'afterColon': true
		}],
		'keyword-spacing': [2, {
			'before': true,
			'after': true
		}],
		'new-cap': [2, {
			'newIsCap': true,
			'capIsNew': false
		}],
		'new-parens': 2,
		'no-array-constructor': 2,
		'no-caller': 2,
		'no-console': 'off',
		'no-class-assign': 2,
		'no-cond-assign': 2,
		'no-const-assign': 2,
		'no-control-regex': 0,
		'no-delete-var': 2,
		'no-dupe-args': 2,
		'no-dupe-class-members': 2,
		'no-dupe-keys': 2,
		'no-duplicate-case': 2,
		'no-empty-character-class': 2,
		'no-empty-pattern': 2,
		'no-eval': 2,
		'no-ex-assign': 2,
		'no-extend-native': 2,
		'no-extra-bind': 2,
		'no-extra-boolean-cast': 2,
		'no-extra-parens': [2, 'functions'],
		'no-fallthrough': 2,
		'no-floating-decimal': 2,
		'no-func-assign': 2,
		'no-implied-eval': 2,
		'no-inner-declarations': [2, 'functions'],
		'no-invalid-regexp': 2,
		'no-irregular-whitespace': 2,
		'no-iterator': 2,
		'no-label-var': 2,
		'no-labels': [2, {
			'allowLoop': false,
			'allowSwitch': false
		}],
		'no-lone-blocks': 2,
		'no-mixed-spaces-and-tabs': 2,
		'no-multi-spaces': 2,
		'no-multi-str': 2,
		'no-multiple-empty-lines': [2, {
			'max': 1
		}],
		'no-native-reassign': 2,
		'no-negated-in-lhs': 2,
		'no-new-object': 2,
		'no-new-require': 2,
		'no-new-symbol': 2,
		'no-new-wrappers': 2,
		'no-obj-calls': 2,
		'no-octal': 2,
		'no-octal-escape': 2,
		'no-path-concat': 2,
		'no-proto': 2,
		'no-redeclare': 2,
		'no-regex-spaces': 2,
		'no-return-assign': [2, 'except-parens'],
		'no-self-assign': 2,
		'no-self-compare': 2,
		'no-sequences': 2,
		'no-shadow-restricted-names': 2,
		'no-spaced-func': 2,
		'no-sparse-arrays': 2,
		'no-this-before-super': 2,
		'no-throw-literal': 2,
		'no-trailing-spaces': 2,
		'no-undef': 2,
		'no-undef-init': 2,
		'no-unexpected-multiline': 2,
		'no-unmodified-loop-condition': 2,
		'no-unneeded-ternary': [2, {
			'defaultAssignment': false
		}],
		'no-unreachable': 2,
		'no-unsafe-finally': 2,
		'no-unused-vars': [2, {
			'vars': 'all',
			'args': 'none'
		}],
		'no-useless-call': 2,
		'no-useless-computed-key': 2,
		'no-useless-constructor': 2,
		'no-useless-escape': 0,
		'no-whitespace-before-property': 2,
		'no-with': 2,
		'one-var': [2, {
			'initialized': 'never'
		}],
		'operator-linebreak': [2, 'after', {
			'overrides': {
				'?': 'before',
				':': 'before'
			}
		}],
		'padded-blocks': [2, 'never'],
		'quotes': [2, 'single', {
			'avoidEscape': true,
			'allowTemplateLiterals': true
		}],
		'semi': [2, 'never'],
		'semi-spacing': [2, {
			'before': false,
			'after': true
		}],
		'space-before-blocks': [2, 'always'],
		'space-before-function-paren': [2, 'never'],
		'space-in-parens': [2, 'never'],
		'space-infix-ops': 2,
		'space-unary-ops': [2, {
			'words': true,
			'nonwords': false
		}],
		'spaced-comment': [2, 'always', {
			'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
		}],
		'template-curly-spacing': [2, 'never'],
		'use-isnan': 2,
		'valid-typeof': 2,
		'wrap-iife': [2, 'any'],
		'yield-star-spacing': [2, 'both'],
		'yoda': [2, 'never'],
		'prefer-const': 2,
		'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
		'object-curly-spacing': [2, 'always', {
			objectsInObjects: false
		}],
		'array-bracket-spacing': [2, 'never']
	}
}
複製代碼

而後在eslint的setting中設置路徑

並添加設置 

"eslint.validate": [ //開啓對.vue,.html文件中錯誤的檢查
    "javascript",
    "javascriptreact",
    {
    "language": "html",
    "autoFix": true
    },
    {
    "language": "vue",
    "autoFix": true
    }
    ],
	]
複製代碼

而後打開eslint的autoFixOnSave選項，就能夠用eslint來進行自動格式化了

styleLint

有了eslint檢測js，html，vue，不過css就要用到css的檢測工具:stylelint
全局安裝

npm i -g styelint
複製代碼

在項目中安裝stylelint-config-standard(官方的標準規則），stylelint-order（對css規則順序作要求），stylelint-scss（scss拓展），後面兩個可選，根據你的項目要求

npm i -d stylelint-config-standard
npm i -d stylelint-order
npm i -d stylelint-scss
複製代碼

在項目根目錄新建.stylelintrc.json文件，複製如下內容

{
    "extends": "stylelint-config-standard",
    "plugins": [
        "stylelint-order",
        "stylelint-scss"
    ],
    "rules": {
      "no-descending-specificity":null,
      "block-no-empty": null,
      "color-no-invalid-hex": true,
      "comment-empty-line-before": [ "always", {
         "ignore": ["stylelint-commands", "after-comment"]
      }],
      "declaration-colon-space-after": "always",
      "indentation": ["tab", {
        "except": ["value"]
      }],
      "max-empty-lines": 2,
      "rule-empty-line-before": [ "always", {
        "except": ["first-nested"],
        "ignore": ["after-comment"]
      } ],
      "unit-whitelist": ["px", "em", "rem", "%", "s","vh","vw"]
    }
  }
複製代碼

最後，在vscode中安裝插件，stylelint-plus
固然也能夠選擇普通的stylelint插件，不過plus版本有保存即fix的功能
在設置中打開StyleLint：Auto Fix On Save，就能夠在保存代碼的同時自動進行格式修復

總結

完善了本身的工做流後，得益於自動格式修復，開發速度有顯著提高，代碼質量也上去了，更重要的是書寫有了容錯率，能夠提早發現不少語法錯誤，真正的bug也能夠經過git的版本控制來減小污染，經過比對找到bug根源

個人我的博客

這是個人我的網站，記錄下前端學習的點滴，歡迎你們參觀
www.ssevenk.com

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程