VS Codeの拡張機能開発でTailwind CSSを導入してみる

はじめに

初めまして。最近昼夜逆転してきた yakiniku0220です。

今回は前回書いた記事の続編で、実際にVS Codeの拡張機能の開発でも採用しているTailwind CSSの導入に関して執筆しようと思いました。
前回の記事を読んでいない方はぜひ読んでいただけると幸いです。

VS CodeのセットアップやReact.jsの導入はこの記事では省きます。

Tailwind CSSのSetup

今回はTailwind CLIを使用した手順を記載します。

Tailwind CSSのInstall

まずはTailwind CSSをinstallしてtailwind.config.jsファイルを生成します。

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.jsにテンプレートファイルのパスを追記

先ほど生成したtailwind.config.jsにテンプレートファイルのパスを追記ます。
今回はdist配下のファイルをcontentに指定します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSSにTailwindディレクティブを追加

今回はsrc配下にindex.cssというファイルを作成し、以下のコードを記載します。

@tailwind base;
@tailwind components;
@tailwind utilities;

Webpackの設定

対象のパッケージをinstallする

まずは以下のパッケージをinstallします。

yarn add -D css-minimizer-webpack-plugin mini-css-extract-plugin css-loader postcss-loader postcss autoprefixer

postcss.config.jsファイルを作成する

src配下にpostcss.config.jsファイルを作成して以下のコードを追記します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

webpack.config.jsファイルを編集する

次にwebpack.config.jsファイルに先ほどinstallしたpackageの設定を記載していきます。

//@ts-check

"use strict";

const path = require("path");
const webpack = require("webpack");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/

/** @type WebpackConfig */
const baseConfig = {
  target: "node", // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
  mode: "none", // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
    extensions: [".ts", ".js", ".tsx"],
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    new MiniCssExtractPlugin({ // MiniCssExtractPluginを追記
      filename: "./src/index.css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
      },
      {
        test: /\.css$/i, // CSSファイルを別ファイルに抽出するために追加
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
  optimization: { // optimization.minimizerを追加
    minimizer: [new CssMinimizerPlugin()],
  },
  devtool: "nosources-source-map",
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};

/** @type WebpackConfig */
const extensionConfig = {
  ...baseConfig,
  entry: "./src/extension.ts", // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, "dist"),
    filename: "extension.js",
    libraryTarget: "commonjs2",
  },
  externals: {
    vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
  },
};

/** @type WebpackConfig */
const webviewConfig = {
  ...baseConfig,
  target: ["web", "es2020"],
  entry: "./src/index.tsx",
  experiments: { outputModule: true },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "webview.js",
    libraryTarget: "module",
    chunkFormat: "module",
  },
};

/** @type WebpackConfig */
const styleConfig = {　// index.cssをcompileするために処理を追加
  ...baseConfig,
  entry: "./src/index.css",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.css",
  },
};

module.exports = [extensionConfig, webviewConfig, styleConfig];

extension.tsファイルを編集する

最後にextension.tsファイルを編集します。
compileした際にdistディレクトリにindex.cssファイルが生成されるので、React.jsを導入したときに作成したgetUri関数を使用します。

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from "vscode";

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("react.start", () => {
      // Create and show panel
      const panel = vscode.window.createWebviewPanel(
        "react",
        "React Sample",
        vscode.ViewColumn.One,
        {
          localResourceRoots: [
            vscode.Uri.joinPath(context.extensionUri, "dist"),
          ],
          enableScripts: true,
        }
      );

      // And set its HTML content
      panel.webview.html = getWebviewContent(
        panel.webview,
        context.extensionUri
      );
    })
  );
}

// This method is called when your extension is deactivated
export function deactivate() {}

function getUri(
  webview: vscode.Webview,
  extensionUri: vscode.Uri,
  pathList: string[]
) {
  return webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, ...pathList));
}

function getNonce() {
  let text = "";
  const possible =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (let i = 0; i < 32; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

function getWebviewContent(webview: vscode.Webview, extensionUri: vscode.Uri) {
  const webviewUri = getUri(webview, extensionUri, ["dist", "webview.js"]);
  const styleUri = getUri(webview, extensionUri, ["dist", "src", "index.css"]);

  const nonce = getNonce();

  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
    <link href="${styleUri}" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
</body>
</html>`;
}

動作確認

index.tsxファイルにTailwind CSSを書いて確認してみます。

compile後、ちゃんとTailwind CSSが適用されているのが確認できました。

まとめ

今回VS Codeの拡張機能開発にTailwind CSSを入れてみました。
Tailwind CSSは個人開発でちょくちょく使っているので、個人的には開発体験は上がった気がします。
今回作ったサンプルコードは以下のリポジトリに作ってあります。
https://github.com/ebarakazuhiro/sample-vscode-extension

最後に

株式会社HRBrainでは新しいメンバーを募集中です。
興味がある方は下記のリンクから宜しくお願い致します。