getLanguageFromExtension

从文件路径获取编程语言类型

文件路径:

语言类型:vue

CodeMirror:vue

✓ 前端语言: 是

✓ 支持高亮: 是

快速示例:

函数签名

type CodeLanguage = 
  | 'typescript'
  | 'javascript'
  | 'json'
  | 'css'
  | 'html'
  | 'vue'
  | 'markdown'
  | 'python'
  | 'sql'
  | 'xml'
  | 'yaml'
  | 'java'
  | 'cpp'
  | 'plaintext'

function getLanguageFromExtension(path: string | null | undefined): CodeLanguage
function getCodeMirrorLanguage(path: string | null | undefined): string
function isFrontendLanguage(path: string | null | undefined): boolean
function isHighlightable(path: string | null | undefined): boolean

参数

参数名	类型	必填	说明
path	string | null | undefined	是	文件路径或文件名

返回值

类型	说明
CodeLanguage	编程语言类型，无法识别时返回 'plaintext'

支持的扩展名

语言	扩展名
TypeScript	ts, tsx, mts, cts
JavaScript	js, jsx, mjs, cjs
JSON	json, jsonc, json5
CSS	css, scss, sass, less, styl, stylus
HTML	html, htm, hbs, handlebars
Vue	vue
Markdown	md, mdx, markdown
Python	py, pyw, pyi
SQL	sql, mysql, pgsql, plsql
XML	xml, svg, xsd, xsl, xslt, wsdl
YAML	yaml, yml
Java	java
C/C++	cpp, cc, cxx, hpp, c, h, hh

使用示例

import { 
  getLanguageFromExtension, 
  getCodeMirrorLanguage,
  isFrontendLanguage,
  isHighlightable
} from 'zcw-shared/functions/code/getLanguageFromExtension'

// 基本用法
getLanguageFromExtension('/src/main.ts')
// 'typescript'

getLanguageFromExtension('script.js')
// 'javascript'

getLanguageFromExtension('Component.vue')
// 'vue'

// 处理 null/undefined
getLanguageFromExtension(null)
// 'plaintext'

// CodeMirror 语言标识符
getCodeMirrorLanguage('app.tsx')
// 'typescript'

// 便捷判断
isFrontendLanguage('styles.css')     // true
isFrontendLanguage('script.py')      // false
isHighlightable('config.yaml')       // true
isHighlightable('LICENSE')           // false

在代码编辑器中的应用

import { getLanguageFromExtension } from 'zcw-shared/functions/code/getLanguageFromExtension'

// 配合 Monaco Editor 或 CodeMirror 使用
function setupEditor(filePath: string) {
  const language = getLanguageFromExtension(filePath)
  
  return {
    language,
    theme: 'vs-dark',
    // ...其他配置
  }
}