「Brackets」について
■「Brackets」について
テキストエディタの一種です。
開発は、Adobe Systems です。
この解説は、ver1.6 時点です。
■「Brackets」を入手する
■インストーラーを入手（無料）
■ソースコードを入手
■プロジェクトを開く
■プロジェクトを開く
１つのフォルダを選択します。
メニューから、「ファイル」→「フォルダ」を指定します。
フォルダ内のファイル郡が、左側のペインに列挙されます。
■ JavaScript ファイルの編集について
■ JavaScript ファイルを編集する
拡張子が .js であるファイルを開きます。
この場合、自動的に JavaScirpt 形式と判別されます。
右下のボタンから、別の形式を指定する事もできます。
■構文チェックについて
JavaScript ファイルを上書き保存すると、構文チェックが開始されます。
リンターは、JSLint です。
解析結果は、下のペインに表示されます。
JSLint のオプションを設定するには、環境設定を編集します。
■コードヒントについて
変数名や関数名などが自動収集され、候補として表示されます。
コードヒントは自動的に表示されます。
例えば、ピリオド「.」を記述したタイミングで表示されます。
「Ctrl + Space」を押して、手動的に開く事もできます。
■クイック編集について
任意の関数名を選択してから、「Ctrl + E」を押します。
関数宣言のコードが、展開表示されます。
ファイルタイプによって、クイック編集の動作は異なります。
■環境設定について
■環境設定を開く
メニューから、「デバッグ」→「環境設定ファイルを開く」を指定します。
■環境設定を編集する
左右分割された、２つのテキストファイルが表示されます。
■ defaultPreferences.json ファイルについて
左右分割の、左側に表示されます。
これは、設定ファイルではなく、参考用の一覧です。
編集しても何も起こりません。（編集できません）
名前の説明と、初期値が列挙されています。
■ brackets.json ファイルについて
左右分割の、右側に表示されます。
これは、設定ファイルです。
左側の解説を参考にしながら、右側にコピペして加筆していきます。
フォーマットは、JSON です。
書式は正確である必要があり、違反はエラーとなります。
例えば、コメントを含める事はできません。
例えば、最後にカンマ「,」を含めるとエラーとなります。
■ JSLint の設定について
"jslint.options" という名前の、一連の連想配列を追加します。
「Visual Studio Code」について
■「Visual Studio Code」について
テキストエディタの一種です。
開発は、Microsoft です。
この解説は、ver0.10.6 時点です。
■「Visual Studio Code」を入手する
■インストーラーを入手（無料）
■ソースコードを入手
■プロジェクトを開く
■プロジェクトを開く
１つのフォルダを選択します。
メニューから、「File」→「Open Folder...」を指定します。
フォルダ内のファイル郡が、左側のペインに列挙されます。
■ JavaScript ファイルの編集について
■ JavaScript ファイルを編集する
拡張子が .js であるファイルを開きます。
この場合、自動的に JavaScirpt 形式と判別されます。
右下のボタンから、別の形式を指定する事もできます。
■構文チェックについて
構文チェックは、リアルタイムで行われます。
リンターは、VS Code 組み込みの JavaScript バリデーターです。
左下に、エラーと警告の総数が表示されます。
クリックすると、解析結果が中央にポップアップ表示されます。
構文チェックのオプションを設定するには、環境設定を編集します。
リンターは、ESLint や JSHint に変更する事もできます。
■コードヒントについて
変数名や関数名などが自動収集され、候補として表示されます。
コードヒントは自動的に表示されます。
例えば、ピリオド「.」を記述したタイミングで表示されます。
「Ctrl + Space」を押して、手動的に開く事もできます。
■環境設定について
■ユーザー設定を開く（全体的な設定）
メニューから、「File」→「User Setting」を指定します。
■ワークスペース設定を開く（フォルダごとの設定）
メニューから、「File」→「Workspace Setting」を指定します。
プロジェクトフォルダを開いている必要があります。
プロジェクトフォルダ内に、「.vscode」 というフォルダが作られます。
■環境設定を編集する
左右分割された、２つのテキストファイルが表示されます。
■ Default Settings ファイルについて
左右分割の、左側に表示されます。
これは、設定ファイルではなく、参考用の一覧です。
編集しても何も起こりません。（編集できません）
名前の説明と、初期値が列挙されています。
■ settings.json ファイルについて
左右分割の、右側に表示されます。
これは、設定ファイルです。
左側の解説を参考にしながら、右側にコピペして加筆していきます。
フォーマットは、JSON ですが、ある程度の書式違反でも有効です。
例えば、１行コメントを含めてもエラーとなりません。
書式違反がある場合、エラーとして左下に通知されます。
■デフォルトの JavaScript バリデーターの設定について
"javascript.validate.*" の、一連の設定を追加します。
詳細は、公式ドキュメントが参考になります。
https://code.visualstudio.com/docs/languages/javascript#_javascript-validation-settings
■任意のバリデーター（リンター）を使用する
１．Node.js をインストールする
最新の、Node.js をインストールします。
２．各モジュールをインストールする
コマンドプロンプトを起動します。
以下のコマンドを入力して、各モジュールをインストールします。
ESLint をインストール（グローバルインストール）
npm install eslint -g
JSHint をインストール（グローバルインストール）
npm install jshint -g
３．拡張機能をインストールする
VS Code を起動します。
F1キーを押して、コマンドパレットを開きます。
「extension」と入力すると、拡張機能関連のコマンドが列挙されます。
「Extensions: Install Extension」を選択します。
すると「ext install 」という表示に変化します。
「ext install jshint」か「ext install eslint」と追記します。
候補が１つに絞られるので、選択するとインストールが開始されます。
成功すると、再起動を促されるので、「Restart Now」ボタンを押します。
４．各リンターの有効無効を設定する
追加したリンターは、デフォルトで有効です。
各リンターから報告されたエラーが、混在して表示されるでしょう。
個別に無効にするには、環境設定に以下の項目を追加します。
各リンターの有効無効を設定する（環境設定）
{
// ESLint の有効無効を設定する
"eslint.enable": false,
// JSHint の有効無効を設定する
"jshint.enable": false,
}
デフォルトの JavaScript バリデーターを無効化する場合です。
デフォルトの JavaScript バリデーターの有効無効を設定する（環境設定）
{
// JavaScript バリデーターの有効無効を設定する
"javascript.validate.enable": false,
}
■公式ドキュメント
詳細は、公式ドキュメントが参考になります。
https://code.visualstudio.com/docs/languages/javascript#_javascript-linters-eslint-jshint
拡張機能は、VS Code Marketplace から探す事もできます。
https://marketplace.visualstudio.com/vscode/Linters (リンター用拡張機能)