整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
筆者開源了一個(gè)小項(xiàng)目code-run，類似codepen的一個(gè)工具，其中代碼編輯器使用的是微軟的Monaco Editor，這個(gè)庫是直接從VSCode的源碼中生成的，只不過是做了一點(diǎn)修改讓它支持在瀏覽器中運(yùn)行，但是功能基本是和VSCode一樣強(qiáng)大的，所以在筆者看來Monaco Editor等于VSCode的編輯器核心。
另外筆者是一個(gè)顏控，不管做什么項(xiàng)目，都熱衷于配套一些好看的皮膚、主題，所以Moncao Editor僅僅內(nèi)置了三種主題是遠(yuǎn)遠(yuǎn)滿足不了筆者需求的，況且還都很丑，于是結(jié)合Monaco Editor和VSCode的關(guān)系就很自然的想到，能不能直接復(fù)用VSCode的主題，接下來就給大家介紹一下筆者的探索之路。
ps.想直接了解如何實(shí)現(xiàn)的可以跳轉(zhuǎn)到【具體實(shí)現(xiàn)】小節(jié)。
先看一下Monaco Editor的基本使用，首先安裝：
npm install monaco-editor然后引入：
import * as monaco from 'monaco-editor'
// 創(chuàng)建一個(gè)js編輯器
const editor=monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript',
theme: 'vs'
})這樣就可以在container元素上創(chuàng)建一個(gè)js語言的編輯器，并且使用了內(nèi)置的vs-dark主題。如果遇到報(bào)錯(cuò)或者語法提示不生效，那么可能需要配置一下worker文件的路徑，可以參考官方示例browser-esm-webpack。
Monaco Editor支持自定義主題，方法如下：
// 定義主題
monaco.editor.defineTheme(themeName, themeData)
// 使用定義的主題
monaco.editor.setTheme(themeName)themeName是要自定義的主題名稱，比如OneDarkPro，themeData是一個(gè)對(duì)象，即主題數(shù)據(jù)，基本結(jié)構(gòu)如下：
{
base: 'vs',// 要繼承的基礎(chǔ)主題，即內(nèi)置的三個(gè)：vs、vs-dark、hc-black
inherit: false,// 是否繼承
rules: [// 高亮規(guī)則，即給代碼里不同token類型的代碼設(shè)置不同的顯示樣式
{ token: '', foreground: '000000', background: 'fffffe' }
],
colors: {// 非代碼部分的其他部分的顏色，比如背景、滾動(dòng)條等
[editorBackground]: '#FFFFFE'
}
}rules里面就是用來給代碼進(jìn)行高亮的，常見的token有string（字符串）、comment（注釋）、keyword（關(guān)鍵詞）等等，完整的請(qǐng)移步themes.ts，這些token是怎么確定的呢，Monaco Editor內(nèi)置了一個(gè)語法著色器Monarch，本質(zhì)是通過正則表達(dá)式來匹配，然后給匹配到的內(nèi)容命名為一個(gè)token。
可以直接在編輯器中查看代碼某塊對(duì)應(yīng)的token，按F1或鼠標(biāo)右鍵點(diǎn)擊Command Palette，然后再找到并點(diǎn)擊Developer: Inspect Tokens，接下來鼠標(biāo)點(diǎn)哪一塊代碼，就會(huì)顯示對(duì)應(yīng)的信息，包括token類型，當(dāng)前應(yīng)用的顏色等。
最開始的想法很簡(jiǎn)單，直接找到VSCode的主題文件，然后通過自定義主題來使用。
VSCode主題文件有兩種方法，如果某個(gè)主題已經(jīng)在你的VSCode里安裝并正在使用的話，那么可以按F1或Command/Control + Shift + P或鼠標(biāo)右鍵點(diǎn)擊Command Palette/命令面板，接著找到并點(diǎn)擊Developer:Generate Color Theme From Current Setting/開發(fā)人員:使用當(dāng)前設(shè)置生成顏色主題，然后VSCode就會(huì)生成一份json數(shù)據(jù)，保存即可。
如果某個(gè)主題沒有安裝的話，那么可以去vscode主題商店搜索該主題，進(jìn)入主題詳情頁面后點(diǎn)擊右側(cè)的Download Extension按鈕即可下載該主題，下載完成后找到剛才下載的文件，文件應(yīng)該是以.vsix結(jié)尾的，直接把該后綴改成.zip，然后解壓縮，最后打開里面的/extension/themes/文件夾，里面的.json文件即主題文件，打開該文件復(fù)制json數(shù)據(jù)即可。
VSCode主題轉(zhuǎn)換成Monaco Editor主題格式上一步過后你應(yīng)該可以發(fā)現(xiàn)VSCode主題的格式是這樣的：
{
"$schema": "vscode://schemas/color-theme",
"type": "dark",
"colors": {
"activityBar.background": "#282c34"
},
"tokenColors": [
{
"scope": "variable.other.generic-type.haskell",
"settings": {
"foreground": "#C678DD"
}
}，
{
"scope": [
"punctuation.section.embedded.begin.php",
"punctuation.section.embedded.end.php"
],
"settings": {
"foreground": "#BE5046"
}
}
]
} 跟Monaco Editor的主題格式有一點(diǎn)區(qū)別，那是不是可以寫一個(gè)轉(zhuǎn)換方法把它轉(zhuǎn)換成下面這樣呢：
{
base: 'vs',
inherit: false,
rules: [
{ token: 'variable.other.generic-type.haskell', foreground: '#C678DD' },
{ token: 'punctuation.section.embedded.begin.php', foreground: '#BE5046' },
{ token: 'punctuation.section.embedded.end.php', foreground: '#BE5046' }
],
colors: {
"activityBar.background": "#282c34"
}
}當(dāng)然可以，這也不難，但是最后當(dāng)你使用這個(gè)自定義的主題后會(huì)發(fā)現(xiàn)，沒有效果，為什么呢，去Monarch看一下對(duì)應(yīng)語言的解析配置后就會(huì)發(fā)現(xiàn)，壓根就沒有VSCode主題里定義的這些token，有效果才奇怪，那怎么辦呢，自己擴(kuò)展這個(gè)解析的配置嗎，筆者最開始就是這么做的，寫正則表達(dá)式嘛，應(yīng)該也不是很難，為此，筆者還把Monarch文檔完整翻譯了一遍Monarch中文，但是當(dāng)筆者在VSCode里看到如下效果時(shí)：
果斷放棄，這顯然是要進(jìn)行語義分析才行，否則誰知道abc是個(gè)變量。
其實(shí)在VSCode里語法高亮使用的是TextMate，而在Monaco Editor里使用的是Monarch，兩者壓根不是一個(gè)東西，為什么Monaco Editor不使用TextMate，而是要開發(fā)一個(gè)新的東西呢，原因是VSCode使用的是vscode-textmate來解析TextMate語法，這個(gè)庫依賴一個(gè)Oniguruma正則表達(dá)式庫，而這個(gè)正則表達(dá)式庫是使用C語言開發(fā)的，當(dāng)然不支持在瀏覽器上運(yùn)行。
既然VSCode的主題不能直接使用，那么就只能能用多少用多少，因?yàn)?code>Monaco Editor內(nèi)置的主題token就只有那么多，那么把它所有的token顏色換成VSCode的主題顏色不就行了嗎，雖然語義高亮沒有，但是總比默認(rèn)主題好看。實(shí)現(xiàn)也很簡(jiǎn)單，首先colors部分的基本可以直接使用，而token部分可以通過上面介紹的方法Developer: Inspect Tokens在VSCode里找到對(duì)應(yīng)代碼塊的顏色，復(fù)制到Monaco Editor主題的對(duì)應(yīng)token上即可，比如筆者轉(zhuǎn)換后的OneDarkPro的實(shí)際效果如下：
在VSCode里的效果如下：
只可粗看，不要細(xì)究。
這個(gè)事情也有人已經(jīng)做了，可以參考這個(gè)倉庫monaco-themes，里面幫你轉(zhuǎn)換了一些常見的主題，可以拿來直接使用。
就在筆者已經(jīng)放棄在Monaco Editor中直接使用VSCode主題的想法后，無意間發(fā)現(xiàn)codesandbox和leetcode兩個(gè)網(wǎng)站中的編輯器主題效果和VSCode中基本一致，而且可以明顯的看到在leetcode中切換主題請(qǐng)求的文件：
基本和VSCode主題格式是一樣的，這就說明在Monaco Editor中使用VSCode主題是可以實(shí)現(xiàn)的，那么問題就變成了怎么實(shí)現(xiàn)。
不得不說，這方面資料真的很少，相關(guān)文章基本沒有，百度搜索結(jié)果里只有一兩個(gè)相關(guān)的鏈接，不過也足以解決問題了，相關(guān)鏈接詳見文章尾部。
主要使用的是monaco-editor-textmate這個(gè)工具（所以除了百度谷歌之外，github也是一個(gè)很重要的搜索引擎啊），先安裝：
npm i monaco-editor-textmatenpm應(yīng)該會(huì)同時(shí)幫你再安裝monaco-textmate、onigasm、monaco-editor這幾個(gè)包，monaco-editor自不必說，我們自己都裝了，其他兩個(gè)可以自行檢查一下，如果沒有的話需要自行安裝。
簡(jiǎn)單介紹一下這幾個(gè)包。
這個(gè)庫就是用來解決上述瀏覽器不支持C語言編寫的Oniguruma的問題，解決方法是把Oniguruma編譯為WebAssembly，WebAssembly是一種中間格式，可以把非js代碼編譯成.wasm格式的文件，然后瀏覽器就可以加載并運(yùn)行它了，WebAssembly已經(jīng)是WEB的標(biāo)準(zhǔn)之一了，隨著時(shí)間的推移，相信兼容性也不是問題。
這個(gè)庫是在VSCode使用的vscode-textmate庫的基礎(chǔ)上修改的， 以便讓它在瀏覽器上使用。主要作用是解析TextMate語法，這個(gè)庫依賴前面的onigasm。
這個(gè)庫的主要作用是幫我們把monaco-editor和monaco-textmate關(guān)聯(lián)起來，內(nèi)部首先會(huì)加載對(duì)應(yīng)語言的TextMate語法文件，然后調(diào)用monaco.languages.setTokensProvider方法來自定義語言的token解析器。
看一下它的使用示例：
import { loadWASM } from 'onigasm'
import { Registry } from 'monaco-textmate'
import { wireTmGrammars } from 'monaco-editor-textmate'
export async function liftOff() {
await loadWASM(`path/to/onigasm.wasm`)
const registry=new Registry({
getGrammarDefinition: async (scopeName)=> {
return {
format: 'json',
content: await (await fetch(`static/grammars/css.tmGrammar.json`)).text()
}
}
})
const grammars=new Map()
grammars.set('css', 'source.css')
grammars.set('html', 'text.html.basic')
grammars.set('typescript', 'source.ts')
monaco.editor.defineTheme('vs-code-theme-converted', {});
var editor=monaco.editor.create(document.getElementById('container'), {
value: [
'html, body {',
' margin: 0;',
'}'
].join('\n'),
language: 'css',
theme: 'vs-code-theme-converted'
})
await wireTmGrammars(monaco, registry, grammars, editor)
}看完前面的使用示例后，接下來我們?cè)敿?xì)看一下如何使用。
首先我們要做的是加載onigasm的wasm文件，這個(gè)文件需要首先被加載，且加載一次就可以了，所以我們?cè)诰庉嬈鞒跏蓟斑M(jìn)行加載：
import { loadWASM } from 'onigasm'
const init=async ()=> {
await loadWASM(`${base}/onigasm/onigasm.wasm`)
// 創(chuàng)建編輯器...
}
init()onigasm.wasm文件可以在/node_modules/onigasm/lib/目錄下找到，然后復(fù)制到項(xiàng)目的/public/onigasm/目錄下，這樣可以通過http進(jìn)行請(qǐng)求。
接下來創(chuàng)建語言id到作用域名稱的映射：
const grammars=new Map()
grammars.set('css', 'source.css')其他語言的作用域名稱可以在各種語言的語法列表這里找到，比如想知道css的作用域名稱，我們進(jìn)入css目錄，然后打開package.json文件，可以看到其中有一個(gè)grammars字段：
"grammars": [
{
"language": "css",
"scopeName": "source.css",
"path": "./syntaxes/css.tmLanguage.json",
"tokenTypes": {
"meta.function.url string.quoted": "other"
}
}
]language就是語言id，scopeName就是作用域名稱。常見的如下：
const scopeNameMap={
html: 'text.html.basic',
pug: 'text.pug',
css: 'source.css',
less: 'source.css.less',
scss: 'source.css.scss',
typescript: 'source.ts',
javascript： 'source.js',
javascriptreact: 'source.js.jsx',
coffeescript: 'source.coffee'
}再接著注冊(cè)TextMate的語法映射關(guān)系，這樣可以通過作用域名稱來加載并創(chuàng)建對(duì)應(yīng)的語法：
import {
Registry
} from 'monaco-textmate'
// 創(chuàng)建一個(gè)注冊(cè)表，可以從作用域名稱來加載對(duì)應(yīng)的語法文件
const registry=new Registry({
getGrammarDefinition: async (scopeName)=> {
return {
format: 'json',// 語法文件格式，有json、plist
content: await (await fetch(`${base}grammars/css.tmLanguage.json`)).text()
}
}
})語法文件和前面的作用域名稱一樣，也是在各種語言的語法列表這里找，同樣以css語言為例，還是看它的package.json的grammars字段：
"grammars": [
{
"language": "css",
"scopeName": "source.css",
"path": "./syntaxes/css.tmLanguage.json",
"tokenTypes": {
"meta.function.url string.quoted": "other"
}
}
]path字段就是對(duì)應(yīng)的語法文件的路徑，我們把這些json文件復(fù)制到項(xiàng)目的/public/grammars/目錄下，這樣就可以通過fetch來請(qǐng)求到。
前面介紹過，Monaco Editor的主題格式和VSCode的格式是有點(diǎn)不一樣的，所以需要進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換可以自己實(shí)現(xiàn)，也可以直接使用monaco-vscode-textmate-theme-converter這個(gè)工具，它可以同時(shí)轉(zhuǎn)換多個(gè)本地文件：
// convertTheme.js
const converter=require('monaco-vscode-textmate-theme-converter')
const path=require('path')
const run=async ()=> {
try {
await converter.convertThemeFromDir(
path.resolve(__dirname, './vscodeThemes'),
path.resolve(__dirname, '../public/themes')
);
} catch (error) {
console.log(error)
}
}
run()運(yùn)行node ./convertTheme.js命令后，就會(huì)把你放在vscodeThemes目錄下所有VSCode的主題文件轉(zhuǎn)換成Monaco Editor的主題文件并輸出到public/themes目錄下，然后我們?cè)诖a里直接通過fetch來請(qǐng)求主題文件并使用defineTheme方法定義主題即可：
// 請(qǐng)求OneDarkPro主題文件
const themeData=await (
await fetch(`${base}themes/OneDarkPro.json`)
).json()
// 定義主題
monaco.editor.defineTheme('OneDarkPro', themeData)經(jīng)過前面這些準(zhǔn)備工作，最后一步要做的是設(shè)置Monaco Editor的token解析器，默認(rèn)使用的是內(nèi)置的Monarch，我們要換成TextMate的解析器，也就是monaco-editor-textmate做的事情：
import {
wireTmGrammars
} from 'monaco-editor-textmate'
import * as monaco from 'monaco-editor'
let editor=monaco.editor.create(document.getElementById('container'), {
value: [
'html, body {',
' margin: 0;',
'}'
].join('\n'),
language: 'css',
theme: 'OneDarkPro'
})
await wireTmGrammars(monaco, registry, grammars, editor)上一步后應(yīng)該可以看到VSCode的主題在Monaco Editor上生效了，但是多試幾次可能會(huì)發(fā)現(xiàn)偶爾會(huì)失效，原因是Monaco Editor內(nèi)置的語言是延遲加載的，并且加載完后也會(huì)同樣注冊(cè)一個(gè)token解析器，所以會(huì)把我們的給覆蓋掉，詳見issue：setTokensProvider unable to override existing tokenizer。
一種解決方法是去除內(nèi)置的語言，這可以使用monaco-editor-webpack-plugin。
安裝：
npm install monaco-editor-webpack-plugin -DVue項(xiàng)目配置如下：
// vue.config.js
const MonacoWebpackPlugin=require('monaco-editor-webpack-plugin')
module.exports={
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({
languages: []
})
]
}
}languages選項(xiàng)用來指定要包含的語言，我們直接設(shè)為空，啥也不要。
然后修改Monaco Editor的引入方式為：
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'最后需要手動(dòng)注冊(cè)我們需要的語言，因?yàn)樗袃?nèi)置語言都被去除了嘛，比如我們要使用js語言的話：
monaco.languages.register({id: 'javascript'})這種方法雖然可以完美解決該問題，但是很大的一個(gè)副作用是語法提示不生效了，因?yàn)橹挥邪藘?nèi)置的html、css、typescript時(shí)才會(huì)去加載對(duì)應(yīng)的worker文件，沒有語法提示筆者也是無法接受的，所以最后筆者使用了一種比較low的hack方式：
// 插件配置
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'less', 'pug', 'scss', 'typescript', 'coffee']
})
// 注釋掉語言注冊(cè)語句
// monaco.languages.register({id: 'javascript'})
// 當(dāng)worker文件被加載了后再wire
let hasGetAllWorkUrl=false
window.MonacoEnvironment={
getWorkerUrl: function (moduleId, label) {
hasGetAllWorkUrl=true
if (label==='json') {
return './monaco/json.worker.bundle.js'
}
if (label==='css' || label==='scss' || label==='less') {
return './monaco/css.worker.bundle.js'
}
if (label==='html' || label==='handlebars' || label==='razor') {
return './monaco/html.worker.bundle.js'
}
if (label==='typescript' || label==='javascript') {
return './monaco/ts.worker.bundle.js'
}
return './monaco/editor.worker.bundle.js'
},
}
// 循環(huán)檢測(cè)
let loop=()=> {
if (hasGetAllWorkUrl) {
Promise.resolve().then(async ()=> {
await wireTmGrammars(monaco, registry, grammars, editor)
})
} else {
setTimeout(()=> {
loop()
}, 100)
}
}
loop()筆者遇到的另外一個(gè)問題是，轉(zhuǎn)換后有些主題的默認(rèn)顏色并未設(shè)置，所以都是黑色，很丑：
這個(gè)問題的解決方法是可以給主題的rules數(shù)組添加一個(gè)空的token，用來作為沒有匹配到的默認(rèn)token：
{
"rules": [
{
"foreground": "#abb2bf",
"token": ""
}
]
}foreground的色值可以取colors選項(xiàng)里的editor.foreground的值，要手動(dòng)修改每個(gè)色值比較麻煩，可以在之前的轉(zhuǎn)換主題的步驟里順便進(jìn)行，會(huì)在下一個(gè)問題里一起解決。
monaco-vscode-textmate-theme-converter這個(gè)包本質(zhì)算是nodejs環(huán)境下的工具，所以想在純前端環(huán)境下使用不太方便，另外它對(duì)于非標(biāo)準(zhǔn)json格式的VSCode主題轉(zhuǎn)換時(shí)會(huì)報(bào)錯(cuò)，因?yàn)楹芏嘀黝}格式是.jsonc，內(nèi)容是帶有很多注釋的，所以都需要自己先進(jìn)行檢查并修改，不是很方便，基于這兩個(gè)問題，筆者fork了它的代碼，然后修改并分成了兩個(gè)包，分別對(duì)應(yīng)nodejs和瀏覽器環(huán)境，詳見https://github.com/wanglin2/monaco-vscode-textmate-theme-converter。
所以我們可以替換掉monaco-vscode-textmate-theme-converter，改成安裝筆者的：
npm i vscode-theme-to-monaco-theme-node -D使用方式基本是一樣的：
// 只要修改引入為筆者的包即可
const converter=require('vscode-theme-to-monaco-theme-node')
const path=require('path')
const run=async ()=> {
try {
await converter.convertThemeFromDir(
path.resolve(__dirname, './vscodeThemes'),
path.resolve(__dirname, '../public/themes')
);
} catch (error) {
console.log(error)
}
}
run()現(xiàn)在就可以直接轉(zhuǎn)換.jsonc文件，而且輸出統(tǒng)一為.json文件，另外內(nèi)部會(huì)自動(dòng)添加一個(gè)空的token作為沒有匹配到的默認(rèn)token，效果如下：
VSCode主題除了代碼主題外，一般還包含編輯器其他部分的主題，比如標(biāo)題欄、狀態(tài)欄、側(cè)邊欄、按鈕等等，所以我們也可以在頁面應(yīng)用這些樣式，達(dá)到整個(gè)頁面的主題也能隨編輯器代碼主題一起切換的效果，這樣能讓頁面整體更加協(xié)調(diào)，具體的實(shí)現(xiàn)上，我們可以使用CSS變量，先把頁面所有涉及到的顏色都定義成CSS變量，然后在切換主題時(shí)根據(jù)主題的colors選項(xiàng)里的指定字段來更新變量即可，具體使用哪個(gè)字段來對(duì)應(yīng)頁面的哪個(gè)部分可以根據(jù)實(shí)際情況來確定，VSCode主題的所有可配置項(xiàng)可以在theme-color這里找到。效果如下：
本文完整詳細(xì)的介紹了筆者對(duì)于Monaco Editor編輯器主題的探索，希望能給有主題定制需求的小伙伴們一點(diǎn)幫助，完整的代碼請(qǐng)參考本項(xiàng)目源碼：code-run。
文章：monaco使用vscode相關(guān)語法高亮在瀏覽器上顯示
文章：codesandbox是如何解決主題的問題
文章：閑談Monaco Editor-自定義語言之Monarch
討論：如何在Monaco Editor中使用VSC主題？
討論：使用WebAssembly來支持TextMate語法
現(xiàn)有編程語言中用中文命名標(biāo)識(shí)符（變量、方法、類名等等）的一個(gè)常被鞭策的短板，是需要時(shí)常切換中英文。即使有“中文輸入下使用英文標(biāo)點(diǎn)”這樣的輸入法選項(xiàng)，代碼中仍有相當(dāng)比例的英文關(guān)鍵字和 API，短期內(nèi)難以完全避免。
趟路的多了，自然有能人開始把坑坑洼洼給填上。前不久剛發(fā)現(xiàn)的這個(gè) VSC 插件就可以省去不少中英切換的麻煩。
一個(gè)源碼文件中，有不少重復(fù)出現(xiàn)的標(biāo)識(shí)符。安裝這個(gè)插件后，只需要在首次輸入時(shí)用外置的中文輸入法，之后在英文狀態(tài)下輸入拼音，輸入過的匹配拼音的中文字段就會(huì)出現(xiàn)在補(bǔ)全彈窗中。輸入回車后，選中的提示項(xiàng)就被輸入。
而且，還沒有編程語言限制！下面是剛嘗試過的：
這個(gè)插件現(xiàn)在的實(shí)現(xiàn)機(jī)制很單純，是對(duì)拼音進(jìn)行匹配，并不借助語法信息，也就是不區(qū)分變量、方法、類，甚至注釋。比如上面 Kotlin 沒有相應(yīng)語法高亮插件，但照樣可用。由于單個(gè)源碼文件中的中文字段總數(shù)有限，這一問題并不突出。
相對(duì)于通用的外置中文輸入法，由于它的可選項(xiàng)范圍僅是當(dāng)前源碼文件中出現(xiàn)過的中文字段，拼音匹配的命中率會(huì)高的多。
當(dāng)然，還有不少可改進(jìn)之處，比如對(duì) PHP 中 $ 打頭的標(biāo)識(shí)符還不支持：
不過，瑕不掩瑜！
歡迎試用：“中文代碼快速補(bǔ)全”VSC插件，并期待在項(xiàng)目地址反饋！
能源人都在看，點(diǎn)擊右上角加'關(guān)注'】
北極星垃圾發(fā)電網(wǎng)訊:去年12月13日，在浙江杭州，生態(tài)環(huán)境部組織全國13家垃圾焚燒連鎖頭部企業(yè)負(fù)責(zé)人，以及各地生態(tài)部門領(lǐng)導(dǎo)、媒體和ngo，召開了“我是環(huán)境守法者”公開宣誓活動(dòng)，活動(dòng)上生態(tài)環(huán)境部翟青副部長(zhǎng)要求各地垃圾焚燒企業(yè)，要做好信息公開公示的工作，并歡迎來自公眾的監(jiān)督。
生態(tài)環(huán)境部也于今年一月初，設(shè)立了生活垃圾焚燒發(fā)電廠自動(dòng)監(jiān)測(cè)數(shù)據(jù)公開平臺(tái)https://ljgk.envsc.cn/index.html，企業(yè)除了將“5+1”的污染排放和爐溫?cái)?shù)據(jù)，上報(bào)此平臺(tái)并向社會(huì)公眾公開，同時(shí)也必須將焚燒項(xiàng)目所在詳細(xì)地址、每臺(tái)爐的爐型、每臺(tái)爐設(shè)計(jì)處理量、每臺(tái)爐投入運(yùn)行的起始時(shí)間、設(shè)計(jì)發(fā)電量、企業(yè)法人代表、信息公開負(fù)責(zé)人姓名等基本信息，在此平臺(tái)上向社會(huì)公眾進(jìn)行公開公示。
清氣團(tuán)、上海青悅、蕪湖生態(tài)中心，三家組織發(fā)起的垃圾焚燒esg環(huán)境績(jī)效平臺(tái)研究團(tuán)隊(duì)，對(duì)上述信息進(jìn)行了詳細(xì)收集，對(duì)我國現(xiàn)有生活垃圾焚燒廠，按照品牌地區(qū)等維度進(jìn)行了數(shù)據(jù)檢索和統(tǒng)計(jì)分析。相關(guān)統(tǒng)計(jì)數(shù)據(jù)可見以下網(wǎng)站http://esg.epmap.org。
在研究團(tuán)隊(duì)上一篇31省492家垃圾焚燒項(xiàng)目勢(shì)力分布統(tǒng)計(jì)報(bào)告之一（品牌篇），披露了全國482家焚燒企業(yè)，有十家企業(yè)，基本信息在平臺(tái)公示存在缺失情況后，相關(guān)企業(yè)如中電、仙游興鴻等迅速聯(lián)系了研究團(tuán)隊(duì)，告知了信息公示缺失的原因和情況，主要是由于通訊線路故障、與平臺(tái)信息傳送渠道不暢導(dǎo)致的。他們也向研究團(tuán)隊(duì)表示，目前已經(jīng)積極聯(lián)系相關(guān)部門，已經(jīng)盡快補(bǔ)足了相關(guān)信息。
研究團(tuán)隊(duì)也確認(rèn)發(fā)現(xiàn)，昆明中電、霸州中電、仁懷中電、仙游興鴻等企業(yè)的相關(guān)基本信息已在生態(tài)環(huán)境部平臺(tái)上補(bǔ)充完整，消除了信息缺失的情況。研究團(tuán)隊(duì)也高度認(rèn)可這種及時(shí)溝通、并重視信息公開的態(tài)度。這些信息的公開，滿足了公眾的知情權(quán)，對(duì)于垃圾焚燒企業(yè)改善在公眾心目中的印象，有積極作用。
研究團(tuán)隊(duì)在此篇將披露品牌企業(yè)在各省垃圾焚燒領(lǐng)域的勢(shì)力分布情況情況。
經(jīng)濟(jì)實(shí)力越強(qiáng)的省份，品牌分散度越高，品牌篇里的十幾家頭部企業(yè)，在各省的優(yōu)勢(shì)并不凸顯。且經(jīng)濟(jì)實(shí)力較強(qiáng)省份甚至中心城市的地方性品牌，反而更為強(qiáng)勢(shì)。
分省份處理能力分布日焚燒垃圾量超過一萬噸的省份共有18個(gè)，其中廣東、江蘇、浙江、山東四個(gè)省份日焚燒量均超過五萬噸，擁有焚燒爐臺(tái)數(shù)，均超過一百臺(tái)。具體分布如下
這些省份的市場(chǎng)被以下品牌所占據(jù)
注：相關(guān)數(shù)據(jù)和指標(biāo)，可能由于準(zhǔn)確性及時(shí)性不足，或與相關(guān)企業(yè)發(fā)生了股權(quán)并購交易，企業(yè)控股主體發(fā)生了變化，或是企業(yè)改擴(kuò)建或完全停產(chǎn)，從而導(dǎo)致相關(guān)信息和數(shù)據(jù)，與實(shí)際現(xiàn)狀存在一定差別。如有疏漏，請(qǐng)及時(shí)聯(lián)系研究團(tuán)隊(duì)。
免責(zé)聲明：以上內(nèi)容轉(zhuǎn)載自北極星環(huán)保網(wǎng)，所發(fā)內(nèi)容不代表本平臺(tái)立場(chǎng)。
全國能源信息平臺(tái)聯(lián)系電話：010-65367702，郵箱：hz@people-energy.com.cn，地址：北京市朝陽區(qū)金臺(tái)西路2號(hào)人民日?qǐng)?bào)社
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
