https://packagecontrol.io/packages/JsPrettier
Sublime Textのパッケージコントローラーからインストールします
(command + shift + p) →【Install Package を選択】→【Js Prettierを選択】
【Package settings】→【JsPrettier】→【settings - Default】を選択して設定ファイルを開きます
次の2つの項目のパスを設定します。
例:)
"prettier_cli_path": "/Users/hogehoge/.nodebrew/current/bin/prettier",
"node_path": "/Users/hogehoge/.nodebrew/current/bin/node",
which prettier
which node
(command + shift + p) →【JsPrettier:Format Codeを選択】
とても便利なのでぜひショートカットを設定しましょう。
// JsPrettier
{ "keys": ["ctrl+p"], "command": "js_prettier" } ,
今時ES6 JavaScriptで記述することが多くなったので
コード検証ツールにESLint、自動整形ツールにPrettierをインストールしてSublimeTextから使用できるようにします。
npm install -g eslint
npm install -g prettier
ここまでの状態で自動整形のテストを行います
test.js ファイルを用意して自動整形してみます
prettier test.js
ターミナル画面(標準出力)に自動整形した結果が表示されます。
実際に自動整形してファイルを更新するには( --write )オプションを使用します。
prettier --write test.js
eslint test.js と行きたいところですが、まず設定ファイルを作成します。 懸賞したいファイルがあるディレクトリから
eslint --init
を実行すると対応形式で設定ファイル( .eslintrc.js )が生成されます こんなファイルです
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};
eslint test.js
でソースコードの検証が実行されます。
.eslintrc editor
https://pirosikick.github.io/eslintrc-editor/
「Airbnb JavaScript Style Guide」はなかなか厳格なルールなので
既存のプロジェクトにいきなり当てはめるには無理がありますが
どの程度厳格なソースフォーマット指定なのか体験しておくだけでも価値があると思います
https://github.com/airbnb/javascript
npm init -y
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
{
"extends": "airbnb"
}
brew uninstall nodebrew
brew uninstall node
curl -L git.io/nodebrew | perl - setup
.bashrc の最後にパスを追加
cd
vi .bash_profile
下記の2行を追加します
# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
正しくインストールされたか確認します。
source ~/.bash_profile
nodebrew help
バージョンが表示されればOKです。
nodebrew ls-remote
nodebrew install-binary v9.5.0
nodebrew list
nodebrew use v9.5.0
node -v
バージョン名が正しく表示されればOKです。