VSCode View Charset Extension

🌐 Language Selection / 言語選択 / 语言选择 / 語言選擇 / 언어 선택

English	日本語	简体中文	繁體中文	한국어

Overview

View Charset is a Visual Studio Code extension that displays the character encoding of files in your workspace in both tree view and web view. With this extension, you can easily check the character encoding of files and identify encoding-related issues.

Features

Character Encoding Display
- Tree View: Displays files and their character encodings in a folder tree that mirrors your workspace directory structure — folders are collapsible, files show the detected charset as a description
- Web View: Rich UI table of file paths and character encodings with search/filter and sort
- Multi-language support (English, Japanese, Chinese, Korean)
Advanced Features
- Configurable file extensions and exclude patterns
- Caching of character encoding detection results
- Detailed logging for debugging
- CSV export functionality from WebView interface

Installation

Clone this repository:

git clone https://github.com/long-910/vscode-view-charset.git

Install dependencies:
```
npm install
```
Build the extension:
```
npm run compile
```
Press F5 to start debugging in VS Code.

Usage

Viewing Character Encodings

In Tree View:
- The "View Charset" view appears in the VS Code explorer sidebar
- Your workspace directory structure is shown as a collapsible folder tree
- Each file displays its detected character encoding as the item description
- Click a folder to expand or collapse it
In Web View:
- Open the command palette (Ctrl+Shift+P)
- Execute "Open View Charset Web View"
- Use the search box to filter by file path or encoding name
- Click column headers to sort by path or encoding
- Click the "Export to CSV" button to export the full list (includes path, filename, and encoding columns)

Configuration

Configure the extension through VS Code settings (Ctrl+,):

{
  "viewCharset.fileExtensions": [
    ".txt",
    ".csv",
    ".tsv",
    ".json",
    ".xml",
    ".html",
    ".css",
    ".js",
    ".ts"
  ],
  "viewCharset.excludePatterns": ["**/node_modules/**", "**/.git/**"],
  "viewCharset.maxFileSize": 1024,
  "viewCharset.cacheDuration": 3600,
  "viewCharset.cacheEnabled": true,
  "viewCharset.debugMode": false,
  "viewCharset.logToFile": false
}

Settings Details

Setting	Description	Default
`viewCharset.fileExtensions`	File extensions to process	Various text files
`viewCharset.excludePatterns`	Glob patterns to exclude	`["/node_modules/", "/.git/"]`
`viewCharset.maxFileSize`	Maximum file size (KB)	`1024`
`viewCharset.cacheDuration`	Cache duration (seconds)	`3600`
`viewCharset.cacheEnabled`	Enable/disable caching	`true`
`viewCharset.debugMode`	Enable/disable debug mode	`false`
`viewCharset.logToFile`	Enable/disable file logging	`false`

Logging

The extension provides detailed logging:

Console Logging: Always enabled (visible in Developer Tools)
File Logging: Enabled via viewCharset.logToFile
- Location: {workspaceRoot}/view-charset.log
- Log Level: Controlled by viewCharset.debugMode
  - Debug: Detailed logs
  - Info: Basic logs

Development

Project Structure

vscode-view-charset/
├── src/
│   ├── extension.ts          # Extension entry point; command registration, event listeners, CacheManager
│   ├── charsetDetector.ts    # Character encoding detection (encoding-japanese, singleton)
│   ├── TreeDataProvider.ts   # Explorer Tree View; folder hierarchy + charset labels
│   ├── webview.ts            # WebView panel; table UI, search/sort, CSV export
│   ├── logger.ts             # Winston-based logger (singleton); console + output channel
│   └── test/
│       ├── runTest.ts        # Integration test runner (vscode-test)
│       ├── fixtures/         # Sample files used as test workspace
│       └── suite/
│           └── extension.test.ts  # Mocha test suite (28 tests)
├── i18n/                     # NLS translation files (en, ja, zh-cn, zh-tw, ko)
├── images/
│   ├── icon.png              # Extension icon
│   └── viewcharset-icon.png  # Tree view icon
├── package.json              # Extension manifest
└── tsconfig.json             # TypeScript settings

Development Scripts

Command	Description
`npm run compile`	TypeScript build + NLS generation
`npm run watch`	TypeScript watch build
`npm run watch:webpack`	Webpack watch build
`npm run lint`	ESLint check
`npm test`	Full test run (compile → lint → mocha)
`npm run package`	Production build (webpack + NLS)

Press F5 in VS Code to launch the Extension Development Host for manual testing.

Contributing

Fork the repository
Create a feature branch: git checkout -b feature/your-feature
Commit changes: git commit -m "Add your feature"
Push to the branch: git push origin feature/your-feature
Create a Pull Request

License

This project is licensed under the MIT License.

Author

long-910 GitHub: long-910

Release Notes

See CHANGELOG.md for details.