Logo

dev-resources.site

for different kinds of informations.

How to Avoid Japanese Characters in Your Code!

Published at
6/24/2023
Categories
unicode
japanese
beginners
vscode
Author
ahandsel
Categories
4 categories in total
unicode
open
japanese
open
beginners
open
vscode
open
Author
8 person written this
ahandsel
open
How to Avoid Japanese Characters in Your Code!

How to Avoid Japanese Characters in Your Code!

The Problem - Do not mix = with

If you are working with Japanese in your code, you might have encountered a bug where you are using a "wrong" equal sign or semi-colon.

For example, I had height=100 instead of height=100 in my code which caused a bug.

Surprisingly hard to spot with the naked eye! 😅

Unicode Ranges for Japanese Characters

5 Unicode ranges encompass Japanese characters.
These ranges are:

  • Japanese-style Punctuation ( 3000 - 303f)
  • Hiragana ( 3040 - 309f)
  • Katakana ( 30a0 - 30ff)
  • Full-Width Roman Characters and Half-Width Katakana ( ff00 - ffef)
  • CJK Unified Ideographs Common and Uncommon Kanji ( 4e00 - 9faf)

The Solution - Use the Highlight Bad Chars Extension

The Highlight Bad Chars extension allows you to highlight any Unicode characters you want in the VS Code editor.
Natively, it highlights some bad characters, such as the No-break space () and the Greek question mark (;).

I added the Japanese Unicode ranges to the highlight-bad-chars.additionalUnicodeChars setting to see when I have Japanese characters in my code clearly.

VS Code Settings

⚡ I recommend configuring the Japanese character highlighting setup as VS Code's Workspace settings so that it is only applied to specific projects.

First, install the Highlight Bad Chars extension.

Then, append the following to your VS Code Workspace settings file (.vscode/settings.json).

{
  "highlight-bad-chars.additionalUnicodeChars": [ "\u3000", "\u3001", "\u3002", "\u3003", "\u3004", "\u3005", "\u3006", "\u3007", "\u3008", "\u3009", "\u300a", "\u300b", "\u300c", "\u300d", "\u300e", "\u300f", "\u3010", "\u3011", "\u3012", "\u3013", "\u3014", "\u3015", "\u3016", "\u3017", "\u3018", "\u3019", "\u301a", "\u301b", "\u301c", "\u301d", "\u301e", "\u301f", "\u3020", "\u3021", "\u3022", "\u3023", "\u3024", "\u3025", "\u3026", "\u3027", "\u3028", "\u3029", "\u302a", "\u302b", "\u302c", "\u302d", "\u302e", "\u302f", "\u3030", "\u3031", "\u3032", "\u3033", "\u3034", "\u3035", "\u3036", "\u3037", "\u3038", "\u3039", "\u303a", "\u303b", "\u303c", "\u303d", "\u303e", "\u303f", "\u3040", "\u3041", "\u3042", "\u3043", "\u3044", "\u3045", "\u3046", "\u3047", "\u3048", "\u3049", "\u304a", "\u304b", "\u304c", "\u304d", "\u304e", "\u304f", "\u3050", "\u3051", "\u3052", "\u3053", "\u3054", "\u3055", "\u3056", "\u3057", "\u3058", "\u3059", "\u305a", "\u305b", "\u305c", "\u305d", "\u305e", "\u305f", "\u3060", "\u3061", "\u3062", "\u3063", "\u3064", "\u3065", "\u3066", "\u3067", "\u3068", "\u3069", "\u306a", "\u306b", "\u306c", "\u306d", "\u306e", "\u306f", "\u3070", "\u3071", "\u3072", "\u3073", "\u3074", "\u3075", "\u3076", "\u3077", "\u3078", "\u3079", "\u307a", "\u307b", "\u307c", "\u307d", "\u307e", "\u307f", "\u3080", "\u3081", "\u3082", "\u3083", "\u3084", "\u3085", "\u3086", "\u3087", "\u3088", "\u3089", "\u308a", "\u308b", "\u308c", "\u308d", "\u308e", "\u308f", "\u3090", "\u3091", "\u3092", "\u3093", "\u3094", "\u3095", "\u3096", "\u3097", "\u3098", "\u3099", "\u309a", "\u309b", "\u309c", "\u309d", "\u309e", "\u309f", "\u30a0", "\u30a1", "\u30a2", "\u30a3", "\u30a4", "\u30a5", "\u30a6", "\u30a7", "\u30a8", "\u30a9", "\u30aa", "\u30ab", "\u30ac", "\u30ad", "\u30ae", "\u30af", "\u30b0", "\u30b1", "\u30b2", "\u30b3", "\u30b4", "\u30b5", "\u30b6", "\u30b7", "\u30b8", "\u30b9", "\u30ba", "\u30bb", "\u30bc", "\u30bd", "\u30be", "\u30bf", "\u30c0", "\u30c1", "\u30c2", "\u30c3", "\u30c4", "\u30c5", "\u30c6", "\u30c7", "\u30c8", "\u30c9", "\u30ca", "\u30cb", "\u30cc", "\u30cd", "\u30ce", "\u30cf", "\u30d0", "\u30d1", "\u30d2", "\u30d3", "\u30d4", "\u30d5", "\u30d6", "\u30d7", "\u30d8", "\u30d9", "\u30da", "\u30db", "\u30dc", "\u30dd", "\u30de", "\u30df", "\u30e0", "\u30e1", "\u30e2", "\u30e3", "\u30e4", "\u30e5", "\u30e6", "\u30e7", "\u30e8", "\u30e9", "\u30ea", "\u30eb", "\u30ec", "\u30ed", "\u30ee", "\u30ef", "\u30f0", "\u30f1", "\u30f2", "\u30f3", "\u30f4", "\u30f5", "\u30f6", "\u30f7", "\u30f8", "\u30f9", "\u30fa", "\u30fb", "\u30fc", "\u30fd", "\u30fe", "\u30ff", "\uff00", "\uff01", "\uff02", "\uff03", "\uff04", "\uff05", "\uff06", "\uff07", "\uff08", "\uff09", "\uff0a", "\uff0b", "\uff0c", "\uff0d", "\uff0e", "\uff0f", "\uff10", "\uff11", "\uff12", "\uff13", "\uff14", "\uff15", "\uff16", "\uff17", "\uff18", "\uff19", "\uff1a", "\uff1b", "\uff1c", "\uff1d", "\uff1e", "\uff1f", "\uff20", "\uff21", "\uff22", "\uff23", "\uff24", "\uff25", "\uff26", "\uff27", "\uff28", "\uff29", "\uff2a", "\uff2b", "\uff2c", "\uff2d", "\uff2e", "\uff2f", "\uff30", "\uff31", "\uff32", "\uff33", "\uff34", "\uff35", "\uff36", "\uff37", "\uff38", "\uff39", "\uff3a", "\uff3b", "\uff3c", "\uff3d", "\uff3e", "\uff3f", "\uff40", "\uff41", "\uff42", "\uff43", "\uff44", "\uff45", "\uff46", "\uff47", "\uff48", "\uff49", "\uff4a", "\uff4b", "\uff4c", "\uff4d", "\uff4e", "\uff4f", "\uff50", "\uff51", "\uff52", "\uff53", "\uff54", "\uff55", "\uff56", "\uff57", "\uff58", "\uff59", "\uff5a", "\uff5b", "\uff5c", "\uff5d", "\uff5e", "\uff5f", "\uff60", "\uff61", "\uff62", "\uff63", "\uff64", "\uff65", "\uff66", "\uff67", "\uff68", "\uff69", "\uff6a", "\uff6b", "\uff6c", "\uff6d", "\uff6e", "\uff6f", "\uff70", "\uff71", "\uff72", "\uff73", "\uff74", "\uff75", "\uff76", "\uff77", "\uff78", "\uff79", "\uff7a", "\uff7b", "\uff7c", "\uff7d", "\uff7e", "\uff7f", "\uff80", "\uff81", "\uff82", "\uff83", "\uff84", "\uff85", "\uff86", "\uff87", "\uff88", "\uff89", "\uff8a", "\uff8b", "\uff8c", "\uff8d", "\uff8e", "\uff8f", "\uff90", "\uff91", "\uff92", "\uff93", "\uff94", "\uff95", "\uff96", "\uff97", "\uff98", "\uff99", "\uff9a", "\uff9b", "\uff9c", "\uff9d", "\uff9e", "\uff9f", "\uffa0", "\uffa1", "\uffa2", "\uffa3", "\uffa4", "\uffa5", "\uffa6", "\uffa7", "\uffa8", "\uffa9", "\uffaa", "\uffab", "\uffac", "\uffad", "\uffae", "\uffaf", "\uffb0", "\uffb1", "\uffb2", "\uffb3", "\uffb4", "\uffb5", "\uffb6", "\uffb7", "\uffb8", "\uffb9", "\uffba", "\uffbb", "\uffbc", "\uffbd", "\uffbe", "\uffbf", "\uffc0", "\uffc1", "\uffc2", "\uffc3", "\uffc4", "\uffc5", "\uffc6", "\uffc7", "\uffc8", "\uffc9", "\uffca", "\uffcb", "\uffcc", "\uffcd", "\uffce", "\uffcf", "\uffd0", "\uffd1", "\uffd2", "\uffd3", "\uffd4", "\uffd5", "\uffd6", "\uffd7", "\uffd8", "\uffd9", "\uffda", "\uffdb", "\uffdc", "\uffdd", "\uffde", "\uffdf", "\uffe0", "\uffe1", "\uffe2", "\uffe3", "\uffe4", "\uffe5", "\uffe6", "\uffe7", "\uffe8", "\uffe9", "\uffea", "\uffeb", "\uffec", "\uffed", "\uffee", "\uffef"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Then all the Japanese characters will be highlighted in your VS Code editor.

Test

Copy the following text to your VS Code editor to verify that the Japanese characters are highlighted.

|   | 、 | 。 | 〃 | 〄 | 々 | 〆 | 〇 | 〈 | 〉 | 《 | 》 | 「 | 」 | 『 | 』 |
| 【 | 】 | 〒 | 〓 | 〔 | 〕 | 〖 | 〗 | 〘 | 〙 | 〚 | 〛 | 〜 | 〝 | 〞 | 〟 |
| 〠 | 〡 | 〢 | 〣 | 〤 | 〥 | 〦 | 〧 | 〨 | 〩 | 〪 | 〫 | 〬 | 〭 | 〮 | 〯 |
| 〰 | 〱 | 〲 | 〳 | 〴 | 〵 | 〶 | 〷 | 〸 | 〹 | 〺 | 〻 | 〼 | 〽 | 〾 | 〿 |
Enter fullscreen mode Exit fullscreen mode

Hope this prevents you from making the same mistake I did! 😄

japanese Article's
30 articles in total
Favicon
re:Invent 2023に参加してから1年たってみて
Favicon
re:Invent 2023 day1
Favicon
IIS環境でのパス制御を考える
Favicon
ホストベースルーティングを活用してALBを集約した際のデメリットを検討する
Favicon
AWS Summit Japan 2024体験記
Favicon
AWS Step Functionsに入門する
Favicon
AWS Community Buildersになって変わったこと
Favicon
GenAI Use Cases JPを試してみた
Favicon
RDS for MySQLでスロークエリログの出力を有効化する
Favicon
AWS Fargateを利用した時刻固定したシステムテストの方法について
Favicon
ランブックを活用したWindows Serverインプレースアップグレードのススメ
Favicon
DocumentDBでマルチバイト検索を実現する場合の留意事項について
Favicon
JAWS DAYS 2024参加体験記
Favicon
OCR + SwiftUI + Japanese. Quite a training project! 😅
Favicon
Lambdaで.NET 7のカスタムランタイムを実行する
Favicon
$0.005 per In-use public IPv4 address per hour の明細が高額になる場合の対応を考える
Favicon
Ryuu - a Japanese dragon
Favicon
事務局長を2年やってみて感じたこと
Favicon
Mechanically Detecting Accessibility Violations
Favicon
Hello back! Sharing some projects
Favicon
Making Font Loading More Efficient with React Content Font
Favicon
How to Avoid Japanese Characters in Your Code!
Favicon
AI 基礎 Part 00 -- stable-diffusion / ChilloutMix を使って日本人美女の画像を作る
Favicon
Next 基礎 Part 02 -- axios で API を叩けるようにする。No 'Access-Control-Allow-Origin' エラーの解決。
Favicon
Next 基礎 Part 01 -- プロジェクト作成
Favicon
AWS 基礎 Part 0 -- EC2 などの AWS サービスと用途の整理
Favicon
Android 基礎 -- Part 00 Android Studio のインストールと Hello World
Favicon
Web エンジニアリング基礎 -- Part02 TS のメリットとブラウザのレンダリング詳細
Favicon
Web エンジニアリング基礎 -- Part01 同期 or 非同期の処理のコールスタックとタスクキュー
Favicon
Ubuntu Settings -- US キーで Mac のように ctrl space の英かな切り替えと ctrl h などでの削除ができるようにする。

Featured ones: