添加Prettier-JavaScript formatter 插件管理vscode airbnb代碼的格式化
發表於 2017-07-17 | 更新於 2018-01-05 | 分類於 ops |
在項目裏面一般會添加 ESLint 來對代碼進行規範和驗證,當項目裏面添加 ESLint（怎樣添加） 代碼規範後，項目運行時就會檢查並提示各種格式問題。
在VSCode中,可以直接在插件裏面添加到你的VSCode中.
ESLint Linter
ESLint 直接在插件安裝搜索安裝就行。
image
在ESLint安裝之後它會告訴你代碼裏面那些格式存在問題，如下圖，
image
這只是最簡單的驗證格式提示,驗證可以自定義規範,也可以引入一些大公司的比如Airbnb, 可以根據官網的教程 或者 阮老師的教程來調整Lint工具的語法風格.
image
設置Airbnb格式規範
下面提供一下配置ESLint的網址”
ESLint官網地址
阮一峯老師教程地址
ESLint會驗證你的 代碼語法,並且提示錯誤在編譯端,但不會幫你修證你的代碼.不過你也可以通過ESLint 的 fix命令提供修復.
ESLint 也可以自動修復格式不過需要添加配置
添加 -fix命令可以參考官網
http://eslint.cn/docs/issue/autofixing
而Prettier-JavaScript 插件會提供你的代碼修復規範功能.下面介紹一下Prettier
Prettier-JavaScript formatter 插件
使用Prettier-JavaScript 的時候,需要在VSCode 插件裏面安裝一下.
image
那安裝後怎樣使用呢?使用快捷鍵(CMD + Shift + P)
1.CMD + Shift + P -> Format Document
or
2.CMD + Shift + P -> Format Selection
之後就會自動更正代碼格式規範,這樣可以省去很多調整代碼規範的時間.
關於Prettier-JavaScript 設置
添加Prettier-JavaScript formatter 後，需要自定義一些樣式，比如:
單引號 替換 雙引號 “prettier.singleQuote”: true,
屬性後添加逗號等 “prettier.trailingComma”: “all”
其它設置 地址
[更新20180104]
更新內容
現在Prettier 越來越高大上了,不單升級了網站,還升級了功能,Prettier越來越能很智能化地幫助你美化代碼.
新增到項目的安裝方式
\ yarn
yarn add prettier --dev --exact
or globally
yarn global add prettier
or
\ npm
npm install --save-dev --save-exact prettier
or globally
npm install --global prettier
配置方式也多了很多(寫幾個比較有用的配置)
Semicolons(分號)
默認: true
true: 每行語句後面都自動添加分號
false: 只在最開始一行添加分號
Quotes引號
默認: false
singleQuote: true 開啓單引號
singleQuote: false 關閉單引號
Trailing Commas (跟隨的逗號)
trailingComma : <none|es5|all>
默認: none 沒有跟隨的逗號
es5 逗號在ES5中(Object, arrays, etc) 合規的情況下添加.
all 逗號在全部情況下添加.包括(arguments)
Bracket Spacing (包圍空格)
默認: true
bracketSpacing:
true - Example: { foo: bar }.
false - Example: {foo: bar}.
JSX Brackets (React JSX)
jsxBracketSameLine:
設置後多行後的JSX會自動變成
<Component
attribute
className
…
Something
Arrow Function Parentheses(箭頭括號)
arrowParens: “<avoid|always>”
默認: avoid
“avoid” - 默認爲空. Example: x => x
“always” - 設置後會自動添加括號. Example: (x) => x
Prettier 能解決哪些問題
主要就是自動格式化代碼, 強行保證項目代碼的風格一致. 而且由於是自動進行格式化, 寫 js 的時候也就能更早發現語法問題, 而且由程序自動進行調整, 甚至報錯.