yukar - Chrome Extension JavaScript Code Editor， js 代码编辑预览 chrome 插件

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2156 天前的主题，其中的信息可能已经有所发展或是发生改变。

可以在这里安装：

https://chrome.google.com/webstore/detail/yukar/ilbmpnheigbnilnbknenakbkkdmaemlp

源码在这里：

https://github.com/LoeiFy/yukar

外什么要做这个插件

很多代码编辑预览的网站，例如 jsfiddle，但很多都不能离线使用
支持 js 程度不全，例如 vue 的 jsx 但很多不支持
复制黏贴测试代码来回切换太麻烦

功能介绍

Async

;(async () => {
  const a = await 'Async Await'
  console.log(a)
})()
// Async Await

Class Properties

class A {
  s = 'Class Properties'
	test() {
    console.log(this.s)
  }
}

(new A()).test()
// Class Properties

Object Rest Spread

const s = [1,2]
const b = [3, ...s]
console.log(b)
// 3,1,2

Decorators

function log(target, name, descriptor) {
  const original = descriptor.value
  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Arguments: ${args}`)
      try {
        const result = original.apply(this, args)
        console.log(`Result: ${result}`)
        return result
      } catch (e) {
        console.log(`Error: ${e}`)
        throw e
      }
    }
  }
  return descriptor
}

class Example {
    @log
    sum(a, b) {
        return a + b
    }
}

const e = new Example()
e.sum(1, 2)
// Arguments: 1,2
// Result: 3

React JSX

<script crossorigin src="//unpkg.com/[email protected]/min/moment.min.js"></script>
<script crossorigin src="//unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script crossorigin src="//unpkg.com/[email protected]/dist/antd-with-locales.min.js"></script>
<script>window['react'] = window.React;window['reactDom'] = window.ReactDOM</script>
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/antd.min.css" />

<div id="root"></div>

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Modal, Button } from 'antd';

function success() {
  const modal = Modal.success({
    title: 'This is a notification message',
    content: 'This modal will be destroyed after 1 second',
  });
  setTimeout(() => modal.destroy(), 1000);
}


ReactDOM.render(
  <Button onClick={success}>Success</Button>,
  document.getElementById('root')
);

Vue JSX

<script src="https://unpkg.com/vue"></script>
<div id="app"></div>

new Vue({
  el: '#app',
  data: {
    msg: 'Support vue jsx'
  },
  methods: {
    hello () {
      alert('This is the message.')
    }
  },
  render(h) {
    return (
      <span class={{ 'my-class': true }} on-click={ this.hello }>
        { this.msg }
      </span>
    )
  }
})