サンプル
textareaタグに複数行の文字列が入力された場合などに以下のようにします。
let str = event.target.value; str = str.replace(/\r?\n/g, '');
textareaタグに複数行の文字列が入力された場合などに以下のようにします。
let str = event.target.value; str = str.replace(/\r?\n/g, '');
どのバージョンからなのかわかりませんが、ドラッグすると移動できます。
旧バージョンでは、settings.jsonに記述して変更していました。
お使いの環境によって格納先が異なります。
以下のように記述すると検索フィールドは下部に移動できます。
"search.location": "panel",
以下のようにすると検索フィールドは左に移動できます。
"search.location": "left",
{ "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" }
{ "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 } }
mkdir webpack_4_scss_introduction
cd webpack_4_scss_introduction
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
以下の通り記述
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' }), ], }
webpack-import-glob-loader
をインストールしているのでglobパターンが使用できます。
@import "./modules/*";
autoprefixerが上手く機能しているか試す為に::placeholder
を記述してみます。
/* 残るコメント */ // 残らないコメント .mod-example { .mod-example__hoge { background-image: url(../images/example.png); } ::placeholder { color: #aaaaaa; } }
webpack --mode=development
webpack --mode=development --watch
ベンダープレフィックスが付いているのが確認できました。
.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 [送りたいメールアドレス]
を入力してenterを押します。
とりあえず自分のメールアドレスにでも送ってみるのが良いと思います。
$ sendmail hoge@example.com
続けて以下のようにメールのヘッダー情報を入力していきます。
以下のFromやToは存在しないようなメールアドレスを入力しても送信先に表示されるようです。
また、本文を入力して、最後に .
を入力してenterを押すと送信されます。
From:aaaaa@aaaaa.com To:bbbbb@bbbbb.com Subject:テスト送信題 テスト送信本文です。 .
image_tagメソッドみたいにタグが出力したいわけではなく、src属性に入れるパスだけ欲しかった。
以下のような感じに書きます。
<%= image_path 'hoge/foo.png' %>
他にも色々あるけどメモ
docker-composeを使ってnginx上でVueアプリケーションを動かす - Qiita
以下のようなディレクトリ構造です。docker-compose.ymlからの相対パスで色々指定しています。
hoge/docker-compose.yml hoge/nginx/Dockerfile hoge/nginx/nginx.conf hoge/html/index.html
version: '2' services: nginx: build: ./nginx ports: - "80:80" volumes: - ./nginx/nginx.conf:/etc/nginx/nginx.conf - ./html:/var/www/html
使用するimageだけ書きました。
FROM nginx:1.15.8
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; } }