Online code editors typically include the following features:
- HTML, CSS, and JavaScript editors with high code
- Code command auto-completion
- A preview window, (usually) reloaded without manual refresh
- HTML preprocessors such as HAML, Pug
- Less, Sass, Stylus and similar CSS preprocessors
- Includes popular JavaScript libraries such as React, preact, Angular, and Vue.js
- Developer Console and Code Verification Tool
- Coding Collaboration
- Share via short URL
- Embed demos in other pages
- Code cloning and referencing
- Copy to code repository, such as github
- Basic services are free
- Value-added services for a small monthly fee
- A way to show the world your coding skills!
Without opening a local editor or starting a service, they allow you to test and preserve code snippets in the browser.
Here are some of the most commonly used front-end code editors.
1. codepen
Codepen wasn't the first, but it's one of the most popular and best-looking code editors out there. The service, co-founded by Chris Coyier of CSS-Tricks, features Pens (a client-side demo) and Projects (an online integrated development environment that can be used to build web projects). It provides a clean and powerful user interface for editing such as share, embed, error console, external JavaScript libraries, popular CSS preprocessors, etc.
Codepen Pro offers private Pens, static resource hosting, collaborative mode, and the ability to customize iframes theming, starting at $8 per month.
2. JSFIDDLE
JSFiddle was one of the first online code editors and influenced other products that followed. It can be used for combined testing of HTML, CSS and JavaScript, and offers a range of libraries and frameworks. The difference is that it can also simulate asynchronous Ajax requests.
JSFiddle focuses on code, so you won't find a bunch of social features like highlighted demos and sharing facilities. The interface is simpler than others, and often you have to hit "Run" to reload the results pane. However, it always feels snappy, and its simplicity may be preferred to some.
3. RunJS
RunJS is an online editor focused on domestic users. In addition to stably providing basic Html/Css/JS editing functions, RunJS provides a special browser plug-in , which enables you to make [code notes] or [article notes] (markdown function) without switching screens when viewing technical articles on any site. ).
A RunJS Pro account offers advanced features like file management, creating private projects, custom covers, and more.
4. JS Bin
JS Bin was created by JavaScript guru Remy Sharp and is still managed by him today. It focuses on coding basics and handles them well. Unlike some other editors, you can edit the entire HTML file, including <head> .
In addition to the usual options, libraries and preprocessors, JS bin was one of the first to offer a debug console, which is essential for JavaScript development. Business Pro accounts offer advanced features such as asset uploads, Private Bins, virtual URLs, and sync with Dropbox. You can even download and install the JS bin locally if you're concerned about privacy or don't want others to see the state of your code!
5. codesandbox
Most code editors only provide one HTML file, one CSS file, and one JavaScript file (though maybe imports ). Codesandbox is more like an online version of the development environment.
Like standard web projects, you can add any number of files and edit them using a multi-tab, code-like integrated development environment (aka IDE). It's free to sign up with a GitHub or Google account, but you can collaborate with others in real-time, export projects to GIT repositories, and deploy to static site hosts like NetLify and Vercel.
Codesandbox can be a practical option if you work remotely or use an atypical development device such as a Chromebook.
6. Playcode
PlayCode is another online development environment that allows you to add multiple HTML, CSS, JavaScript and resource files. The interface is simpler than CODESANDBOX, but it's fast, looks great, is easy to use, and may lower the barrier to entry for beginners.
PlayCode has a log console, and unlike anything else, it allows you to control the size and update frequency of the preview window. The editor is free, but you must log in with a Google, Microsoft, Github or email account to save projects.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。