Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Visual Studio Code バージョン1.65.2の検索フィールドを下部に移動する(Visual Studio Codeの設定変更)

参考にさせていただいたページ

バージョン1.65.2以降の場合

どのバージョンからなのかわかりませんが、ドラッグすると移動できます。

  • まずメニューから「View > Debug Console」とか「View > Termial」を選択して、下部のツールを表示させます。
  • サイドバーに表示されている検索アイコンをドラッグして、「PROBLEMS | OUTPUT | DEBUG CONSOLE | TERMINAL」と表示されているところに移動します。

旧バージョンの場合

旧バージョンでは、settings.jsonに記述して変更していました。

settings.jsonを開く

メニューから開く

  • 上部のメニューから「Code > Preferences > Settings」を選択してSettingsを開きます。
  • 右上のファイルアイコンをクリックすると、settings.jsonが開きます。

直接探すことは無いと思いますが、格納先

お使いの環境によって格納先が異なります。

  • Windows: %APPDATA%\Code\User\settings.json (C:\Users\ユーザー名\AppData\Roaming\Code\User\settings.json
  • Mac: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

settings.jsonを編集する

以下のように記述すると検索フィールドは下部に移動できます。

"search.location": "panel",

以下のようにすると検索フィールドは左に移動できます。

"search.location": "left",

settings.jsonサンプル その1

{
    "window.zoomLevel": 0,
    "editor.fontFamily": "Ricty Diminished",
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.wordWrap": "on",
    "editor.fontSize": 16,
    "emmet.includeLanguages": {
        "erb": "html",
    },
    "workbench.editor.labelFormat": "short",
    "javascript.updateImportsOnFileMove.enabled": "always"
}

settings.jsonサンプル その2

{
  "window.zoomLevel": 0,
  "editor.fontFamily": "Cica",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.wordWrap": "on",
  "editor.fontSize": 16,
  "emmet.includeLanguages": {
    "erb": "html"
  },
  "workbench.editor.labelFormat": "short",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // ESLintに対応しているファイルは保存時にESLintによるフォーマットを行う
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": false,
  "eslint.packageManager": "yarn",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "./node_modules/typescript/lib",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[graphql]": {
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  }
}

webpack4.x + sass-loader + postcss-loader + autoprefixerでscssファイルをコンパイルする

今日の環境

  • Windows10 Home
  • node 12.13.1
  • npm 6.13.1
  • webpack 4.41.2
  • webpack-cli 3.2.3

プロジェクトディレクトリを作成

mkdir webpack_4_scss_introduction
cd webpack_4_scss_introduction

npm initする

npm init

グローバルにインストール

npm install -g webpack webpack-cli

プロジェクトにインストール

npm install -D webpack webpack-cli
npm install -D webpack-import-glob-loader
npm install -D style-loader css-loader sass-loader node-sass postcss-loader autoprefixer
npm install -D mini-css-extract-plugin

ディレクトリとファイルを作成

mkdir src\scss\modules
copy nul src\scss\style.scss
copy nul src\scss\modules\_mod_example.scss
copy nul webpack.config.js

webpack.config.jsの編集

以下の通り記述

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    style: './src/scss/style.scss',
  },
  output: {
    path: `${__dirname}/dist`,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              // CSS内のurl()メソッドの取り込みを禁止する
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2
            },
          },
          {
            loader: 'postcss-loader',
            options: {
                // PostCSS側でもソースマップを有効にする
                sourceMap: true,
                plugins: [
                  // Autoprefixerを有効化
                  // ベンダープレフィックスを自動付与する
                  require('autoprefixer')({ grid: true })
                ]
            },
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'webpack-import-glob-loader',
          },
        ],
      }
    ],
  },
  plugins:[
    // cssの出力先を指定する
    new MiniCssExtractPlugin({ filename: 'style/[name].css' }),
  ],
}

src/scss/style.scssの編集

webpack-import-glob-loaderをインストールしているのでglobパターンが使用できます。

@import "./modules/*";

src/scss/modules/_mod_example.scssの編集

autoprefixerが上手く機能しているか試す為に::placeholderを記述してみます。

/*
  残るコメント
*/
// 残らないコメント
.mod-example {
  .mod-example__hoge {
    background-image: url(../images/example.png);
  }
  ::placeholder {
    color: #aaaaaa;
  }
}

ビルドしてみる

webpack --mode=development
webpack --mode=development --watch

生成されたstyle.cssを確認する

ベンダープレフィックスが付いているのが確認できました。

vue/singleline-html-element-content-newlineのルールを無視するタグを追加する

参考にさせて頂いたページ

タグ毎に個別で無視するには

.eslintrc.jsのrulesに以下のように書きます。

{
  "vue/singleline-html-element-content-newline": ["error", {
    "ignoreWhenNoAttributes": true,
    "ignoreWhenEmpty": true,
    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
  }]
}

INLINE_ELEMENTSというのがどこから来るのかというと、以下のような感じで./node_modules/eslint-plugin-vueからrequireします。

const INLINE_ELEMENTS = require('./node_modules/eslint-plugin-vue/lib/utils/inline-non-void-elements.json')

eslint-plugin-vue/singleline-html-element-content-newline.js at master · vuejs/eslint-plugin-vue · GitHub」に書いてありました。

sendmailコマンドでメールを送信する

参考にさせて頂いたページ

sendmailコマンドで送信してみる

以下のように sendmail [送りたいメールアドレス] を入力してenterを押します。
とりあえず自分のメールアドレスにでも送ってみるのが良いと思います。

$ sendmail hoge@example.com

続けて以下のようにメールのヘッダー情報を入力していきます。 以下のFromやToは存在しないようなメールアドレスを入力しても送信先に表示されるようです。 また、本文を入力して、最後に . を入力してenterを押すと送信されます。

From:aaaaa@aaaaa.com
To:bbbbb@bbbbb.com
Subject:テスト送信題
テスト送信本文です。
.

Rails5 erbで画像パスを取得する

参考にさせて頂いたページ

はじめに

image_tagメソッドみたいにタグが出力したいわけではなく、src属性に入れるパスだけ欲しかった。

サンプルコード

以下のような感じに書きます。

<%= image_path 'hoge/foo.png' %>

その他

他にも色々あるけどメモ

  • image_url
  • asset_path
  • asset_url

docker-composeとnginxのdocker imageで簡素に始める

参考にさせて頂いたページ

docker-composeを使ってnginx上でVueアプリケーションを動かす - Qiita

ディレクトリ構造

以下のようなディレクトリ構造です。docker-compose.ymlからの相対パスで色々指定しています。

hoge/docker-compose.yml
hoge/nginx/Dockerfile
hoge/nginx/nginx.conf
hoge/html/index.html

docker-compose.yml

version: '2'

services:
  nginx:
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./html:/var/www/html

Dockerfile

使用するimageだけ書きました。

FROM nginx:1.15.8

nginx.conf

user nginx;

events {
  worker_connections 2048;
  multi_accept on;
  use epoll;
}

http {
  charset UTF-8;
  server {
    listen 80 default;
    server_name example-hoge.com;
    root /var/www/html;
    index index.html;
    charset utf-8;
  }
}