[VS Code] FAQ¶

全般¶

ファイルをクリックしたら新しいタブで開きたい¶

Workbench > Editor: Enable Preview のチェックを外す。

設定だと "workbench.editor.enablePreview": false

特定ファイルのPrettierをオフにしたい¶

設定に"prettier.disableLanguages": [...]を追加。

Markdownの場合は"prettier.disableLanguages": ["markdown"]。

VSCodeでMarkdownの自動フォーマット＆整形ルールを自由に設定 - Qiita

batファイルをShift-JISで開きたい¶

拡張子ごとのエンコーディング指定を設定(settings.json)に追加する。

  "[bat]": {
    "files.encoding": "shiftjis"
  },

JavaScript系¶

node.jsのVSCode外プロセスに対してデバッグしたい¶

デバッガから実行できないケース。

nodeは--inspect=<port>オプションを指定して実行する
VSCodeのActionでDebug: Nodeのプロセスにアタッチを選択肢、上記プロセスを選ぶ

デバッグ - 入門 | Node.js

aws-sam-localでTypeScriptをデバッグしたい¶

構成が以下の場合。

.
├── event.json
├── yourapp
│   ├── dist  (build後にできる)
│   │   └── index.js
│   ├── index.ts
│   ├── package.json
│   ├── package-lock.json
│   ├── src
│   │   ├── clients
│   │   └── services
│   ├── tests
│   │   └── unit
│   │       └── test-handler.js
│   ├── tsconfig.json
│   └── webpack.config.js
└── template.yaml

`tsconfig.json`¶

outDirに注意。
sourceMap: true をつける。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true
  }
}

`webpack.config.js`¶

targetとlibraryTargetに注意。

// inline-source-mapにできる?
module.exports = {
  devtool: 'inline-source-map',
  entry: './index.ts',
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
  },
};

`launch.json`¶

outFilesを指定しないとTypeScriptソースのブレイクポイントで停止しない
localRootとremoteRoot配下それぞれにjsファイル(with sourcemap)が必要
sourceMapはデフォルトでtrueなので設定不要
Webpack利用時はsourceMapPathOverridesの指定が必要

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "AWS SAM start-api",
      "type": "node",
      "request": "attach",
      "address": "localhost",
      "port": 5858,
      "localRoot": "${workspaceRoot}/yourapp/dist",
      "remoteRoot": "/var/task",
      "protocol": "inspector",
      "stopOnEntry": false,
      "smartStep": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceRoot}/yourapp/node_modules/*",
        "webpack:///./*": "${workspaceRoot}/yourapp/*",
        "webpack:///*": "*"
      },
      "outFiles": ["${workspaceRoot}/yourapp/dist/*.js"]
    }
  ]
}

実行¶

webpack --watch & sam local start-api --template ../template.yaml -d 5858

拡張機能¶

自動更新をOFFにしたい¶

"extensions.autoUpdate": false

REST Clientで環境変数を使いたい¶

{{$processEnv 環境変数名}}

rest-client.environmentVariablesに指定した環境変数を使いたいなら

{{$processEnv %キー名}}

rest-client.environmentVariablesに指定すれば.. {{$processEnv %secretKey}} でアクセス可能に

  "rest-client.environmentVariables": {
    "local": {
      "secretKey": "PASSWORD",
    },
  }

REST Client - Visual Studio Marketplace

Prettierが効かない¶

settings.jsonでprettier.disableLanguagesに指定されていないか確認.

  "prettier.disableLanguages": [
    "markdown",
    "yaml"
  ],