タグ「node.js」での検索

JavaScript自動整形PrettierをSublime Textから使用できるようにする

● JavaScript自動整形PrettierをSublime Textから使用できるようにする

・Js Prettier

https://packagecontrol.io/packages/JsPrettier

● Js Prettierのインストール

Sublime Textのパッケージコントローラーからインストールします

(command + shift + p) →【Install Package を選択】→【Js Prettierを選択】

● 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

● Js Prettierの実行

(command + shift + p) →【JsPrettier:Format Codeを選択】

とても便利なのでぜひショートカットを設定しましょう。

● Js Prettierのショートカット設定(ctrl+pで起動する場合)

    // JsPrettier
    { "keys": ["ctrl+p"], "command": "js_prettier" } ,
No.1152
06/16 11:33

edit

node.js

JavascriptのソースチェックESLintと自動整形ツールPrettierをインストールする

今時ES6 JavaScriptで記述することが多くなったので
コード検証ツールにESLint、自動整形ツールにPrettierをインストールしてSublimeTextから使用できるようにします。

● ESLintのインストール

npm install -g eslint

● Prettierのインストール

npm install -g prettier

● PrettierによるJavaScriptソースコード自動整形のテスト

ここまでの状態で自動整形のテストを行います
test.js ファイルを用意して自動整形してみます

prettier test.js 

ターミナル画面(標準出力)に自動整形した結果が表示されます。
実際に自動整形してファイルを更新するには( --write )オプションを使用します。

prettier --write test.js

● ESLintによるJavaScriptソースコード検証のテスト

※1. .eslintrc.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"
        ]
    }
};

※2. eslintの実行

eslint test.js 

でソースコードの検証が実行されます。

● ESLint検証ルール( .eslintrc.js )をカスタマイズする

.eslintrc editor
https://pirosikick.github.io/eslintrc-editor/

● Airbnb JavaScript Style Guideに沿ったESLintを設定する

「Airbnb JavaScript Style Guide」はなかなか厳格なルールなので
既存のプロジェクトにいきなり当てはめるには無理がありますが
どの程度厳格なソースフォーマット指定なのか体験しておくだけでも価値があると思います

・ Airbnb JavaScript Style Guide

https://github.com/airbnb/javascript

・ Airbnb JavaScript Style Guide に沿ったESLintを設定します

npm init -y
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint
{
  "extends": "airbnb"
}

● Sublime Textから使用できるようにする

JavaScript自動整形PrettierをSublime Textから使用できるようにする

No.1151
06/16 11:34

edit

node.js

node.js の 複数のバージョンを管理できる nodebrew をインストールする

● (Mac)まず homebrew でインストールしてある node.js nodebrew をアンインストールする

brew uninstall nodebrew
brew uninstall node

● (Mac または Linux)に nodebrew をインストールする

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 を使って好きなバージョンの node.js をインストールする

・インストール可能な node.js の全バージョンを表示する

nodebrew ls-remote

・(例)Node.js v9.5.0 バージョンをインストールする

nodebrew install-binary v9.5.0

・現在インストール済みの node.js 全バージョンを表示

nodebrew list

・(例)Node.js v9.5.0 バージョンに切り替える

nodebrew use v9.5.0

・Node.js が正しくインストールされていることを確認する

node -v

バージョン名が正しく表示されればOKです。

No.1069
06/04 15:41

edit

node.js