Prettier JS はシングルクォーテーションで CSS はダブルクォーテーションにしたい

自動で JS, CSS の整形をしてくれる Prettier とても便利で愛用しています。
同じクオートの設定を JS の時は ' (Single Quote), CSS の時は " (Double Quote) とで分けたい時のメモ

overrides, files を使って設定の場合分けができる

.prettierrc.json

{
  "singleQuote": true,
  "overrides": [
    {
      "files": ["**/*.css", "**/*.scss", "**/*.html"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

デフォルトでは Single Quote ' を使い、拡張子が .css, .scss, .html の場合は singleQuote: false つまり Double Quote " でフォーマされるようになる

同じように overrides を使えばフォーマットの幅が広がりそうです。
おわり ₍ ᐢ. ̫ .ᐢ ₎

---

[参考]

• Configuration File · Prettier
• Prettier single quote for JavaScript and JSON, double quote for HTML, Sass and CSS - Stack Overflow

AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発

【Amazon.co.jp限定】アイカツ! シリーズ 10th Anniversary Album Vol.05「タイトル未定」(メガジャケ付)

npm WARN config init.author.name Use `--init-author-name` instead.

Node.js のバージョンを上げて npm コマンドを使ったら次のような warning が表示された

npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.

環境

• node v16.17.0
• npm v8.15.0

config の key が変更になっていた

init.author.name
DEPRECATED: Use --init-author-name instead.
cf. config | npm Docs

init.author.xxx の代わりに --init-author-xxx を使えﾄﾉｺﾄ。
init.author.xxx が残っていると永遠に WARNING が表示されるので、この設定を削除してしまう

# 設定の確認
$  npm c list
; "user" config from /Users/USER_NAME/.npmrc

//registry.npmjs.org/:_authToken = (protected)
init.author.email = "YOUR EMAIL"
init.author.name = "YOUR NAME"
init.author.url = "YUOR URL"
registry = "https://registry.npmjs.org/"

# `init.author.xxx` を削除
$ npm c delete init.author.email
$ npm c delete init.author.name
$ npm c delete init.author.url

設定を削除したらとりあえず警告は出なくなりました。

--init-author-xxx が設定できない問題

ターミナルから設定しようとしてもエラーになる…

$ npm c set --init-author-name="KiKiKi KiKi"
npm ERR! code EUSAGE
npm ERR!
npm ERR! Manage the npm configuration files
npm ERR!
npm ERR! Usage:
npm ERR! npm config set <key>=<value> [<key>=<value> ...]
npm ERR! npm config get [<key> [<key> ...]]
npm ERR! npm config delete <key> [<key> ...]
npm ERR! npm config list [--json]
npm ERR! npm config edit
npm ERR!
npm ERR! Options:
npm ERR! [--json] [-g|--global] [--editor <editor>] [-L|--location <global|user|project>]
npm ERR! [-l|--long]
npm ERR!
npm ERR! alias: c
npm ERR!
npm ERR! Run "npm help config" for more info

こっち使えって書いてるのになんでや…

.npmrc に設定を書いてみても無視される

.npmrc

--init-author-name="KiKiKi"

config を見ると設定としては表示されるが npm init 時に設定が反映されない

# 設定としては読み込まれている
$ npm c list
; "project" config from /Users/kikiki/myproject/.npmrc

--init-author-name = "KiKiKi"

$ npm init
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC"
}

init-author-xxx なら上手く動作する

GitHub の issue も close になっているのでよく分かってないのですが、そこに書かれたコメントの通り --init-author-xxx ではなく init-author-xxx なら上手く動作しました…

init-author-xxx はコマンドから設定可能

$ npm c set init-author-name="KiKiKi KiKi"
$ npm c set init-author-email="YOUR EMAIL"
$ npm c set init-author-url="YOUR WEB SITE"
$
$ npm init
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "KiKiKi KiKi <YOUR EMAIL> (YOUR WEB SITE)",
  "license": "ISC"
}

WARNING に出てくるプロパティで設定できないのどうして… (ᐡ o̴̶̷̤ ﻌ o̴̶̷̤ ᐡ)

---

[参考]

• Warning in npm config at latest version - Stack Overflow
• config | npm Docs
• [BUG] init.author.name deprecation warning does not stop · Issue #4840 · npm/cli · GitHub

知って得するnpmコマンド一覧

わたしの美しい庭

「わたしの美しい庭」良かった

Rollup require がバンドルされないにハマる

Rollup を使って JS をビルドしていたのですが CommonJS 形式の require が解決されずそのまま出力されてしまう問題にハマったのでメモ

環境

• rollup v2.77.2
• @rollup/plugin-node-resolve v13.3.0
• @rollup/plugin-commonjs v22.0.1

rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

const config = {
  input: './src/main.js',
  output: {
    file: './build/bundle.js',
    format: 'esm'
  },
  plugins: [nodeResolve(), commonjs(),]
};

export default config;

🙆 CommonJS (require) のみの場合は OK

sub.cjs.js

exports.sub = (x, y) => {
  return x - y;
};

main.js

const { sub } = require('./sub.cjs');

const x = sub(10, 5);
console.log(x);

👇 ビルド npx rollup -c

/build/bundle.js

var main = {};
var sub_cjs = {};
const sub$1 = (x, y) => {
  return x - y;
};
sub_cjs.sub = sub$1;

const { sub } = sub_cjs;
const x = sub(10, 5);
console.log(x);

export { main as default };

🙅 ESM (import) と CommonJS (require) が混在すると NG

sum.js

export const sum = (x, y) => {
  return x + y;
};

main.js

import { sum } from './sum';
const { sub } = require('./sub.cjs.js');

const a = sum(1, 2);
console.log(a);

const b = sub(10, 5);
console.log(b);

👇 ビルド npx rollup -c

/build/bundle.js

const sum = (x, y) => {
  return x + y;
};
const { sub } = require('./sub.cjs.js');

const a = sum(1, 2);
console.log(a);

const b = sub(10, 5);
console.log(b);

require 文がそのまま残ってしまう
main.js で import より先に const { sub } = require('./sub.cjs.js'); を書いても同様

import と require が混在する場合は transformMixedEsModules オプションを true にする必要がある

transformMixedEsModules
Type: boolean
Default: false

Instructs the plugin whether to enable mixed module transformations. This is useful in scenarios with modules that contain a mix of ES import statements and CommonJS require expressions. Set to true if require calls should be transformed to imports in mixed modules, or false if the require expressions should survive the transformation. The latter can be important if the code contains environment detection, or you are coding for an environment with special treatment for require calls such as ElectronJS. See also the "ignore" option.
cf. https://github.com/rollup/plugins/tree/master/packages/commonjs#transformmixedesmodules

rollup.config.js を修正する

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

const config = {
  input: './src/index.js',
  output: {
    file: './build/dist.js',
    format: 'iife',
  },
-  plugin: [commonjs(), nodeResolve()],
+  plugins: [
+    nodeResolve(),
+    commonjs({
+      transformMixedEsModules: true,
+    }),
+  ],
};

main.js

import { sum } from './sum';
const { sub } = require('./sub.cjs.js');

const a = sum(1, 2);
console.log(a);

const b = sub(10, 5);
console.log(b);

👇 ビルド npx rollup -c

/build/bundle.js

var sub_cjs = {};
const sub$1 = (x, y) => {
  return x - y;
};
sub_cjs.sub = sub$1;
const sum = (x, y) => {
  return x + y;
};
const { sub } = sub_cjs;

const a = sum(1, 2);
console.log(a);

const b = sub(10, 5);
console.log(b);

npm パッケージを require で読み込んでも大丈夫っぽい

懐かしの jQuery を npm でインストールしたものを使ってみる
cf. jquery - npm

& npm i jquery

パッケージの中を見てみると export とかがされている訳ではなく return jQuery の様になっていた import $ from "jquery"; も使えるようだけど敢えて const $ = require( "jquery" ); で読み込ませる

main.js

const $ = require('jquery');
import { sum } from './sum';
const { sub } = require('./sub.cjs.js');

const a = sum(1, 2);
console.log(a);

const b = sub(10, 5);
console.log(b);

$(() => {
  const btn = $('.btn');
  btn.on('click', () => {
    console.log('clicked!');
  });
});

👉 ビルド npx rollup -c

ビルドされた JS を簡易な HTML で読み込ませて <button class="btn"> がクリックされた時にコンソールに clicked! が出力されることを確認できれば恐らくOK！

所管

最初 require がバンドルされずにハマっていたのですが明示的にオプションを指定してあげなければならないだけでした。ドキュメント…ちゃんと読もう… (いつものこと)

おわり

---

[参考]

• plugins/packages/commonjs at master · rollup/plugins · GitHub
• @rollup/plugin-commonjs - npm
• @rollup/plugin-node-resolve - npm
• Rollup なぜrollup-plugin-commonjs、rollup-plugin-node-resolveプラグインが必要なのか | nansystem

https://chaika.hatenablog.com/entry/2022/08/08/083000

Node.jsデザインパターン 第2版

はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）

神クズ☆アイドル: 1 (ZERO-SUMコミックス)

(神クズ☆アイドル おもしろい)