javascript - 这么优美的代码格式，请问怎么写的？

Question

使用的编辑工具：sublime text 3
问题：此工具默认的背景色是黑色的，不是很习惯，请问下怎么设置背景色，还有设置代码格式，如：代码行间距、“=”前后的空格
网上一位大神写的代码

这格式，简直美得不要不要。

而我的是这样的

还有，大家也可以分享自己的优美的代码格式，我也学习学习

Answer 1

我觉得你有点太在意这些细枝末节的玩意了……
或者说太多人热衷于所谓的'优美'，对着一堆helloworld级的代码欣赏优美有什么意思？

Answer 2

除了行间距，其他的空格都是靠编码习惯养成的。sublime的背景，你可以选择不同的theme来改变背景色及字体配色。

当然，除了自己养成好的代码习惯外，也要选个好看的主题，才能显得更好看。

列几个我自己平时写代码的时候，会注意的几点（不完全）：

1.多个参数用逗号分隔，且逗号后加一个空格；参数的结束括号和大括号之间加一个空格；运算符前后各加一个空格。

function testFunc(arg1, arg2) {
    return arg1 + arg2;
}

2.同行内的分号后加一个空格

for(var i = 0; i < 10; i++) {
    console.log('Index:', i);
}

3.如果使用ES6的解构取值，在大括号内的两边各一个空格

import React, { Component, PropTypes } from 'react';

const { params } = this.props;

4.Object对象的key、value书写的时候，在“:”后加一个空格

const obj = {
    loading: false,
    params: {
        page: 1,
        page_size: 20,
        keyword: ''
    }
};

5.Object对象的key、value写在同一行时

const obj = { loading: false, params: { page: 1, page_size:20, keyword: '' } };

贴几张代码截图：

Answer 3

你仅仅需要安装个代码格式化插件就可以 我用的HTML-CSS-JS Prettify 这个需要你先装node

还有上面那个好看的行高是网页控制的 ，实际书写行高不会那么大，要不然一屏幕显示不了多少，

另外这个合适好的风格完全可以手写出来，比如参考kissy的代码风格链接描述
或者参考google的代码风格链接描述
你自然而然就会写出格式化好的代码，而无需格式化插件之类的

Answer 4

虽然我只是个刚学编程的新手, 但是这种风格问题完全是应该自己手写的吧, 依赖插件的话你换个环境怎么办? 良好的代码风格不仅对自己更友好, 对其他阅读你代码的人也会更友善的. 所以, 解决方法是平时练习时就应该留意, 看到不美观的地方要下意识的修改. 人嘛, 总是应该热爱美好事物的

PS: 我刚刚也正好在练习手写快排

Answer 5

我现在都不自己去弄这些了。
https://github.com/prettier/p...
很好用，默认配置就很好了，
而且很多开源库都开始使用这个来调整自己的代码格式。

Answer 6

Javascript standard style

我用 vs code 编辑器，直接安装 chenxsan.vscode-standardjs 这个插件，并设置 autoFixOnSave 为 true，这样保存就自动修复简单的格式问题了，不对的也有警告

其它Sublime也有对应插件。

Answer 7

用webStorm里边code里边有Reformate Code，自动优化代码格式。

Answer 8

或许你需要这个, 腾讯前端Alloyteam代码规范

Answer 9

我第一眼看到的是不是代码优美而是快排，是不是没救了。

话说一般直接用格式化，很多ide都有。

Answer 10

装个插件格式化不就可以了，主要还是平时养成良好习惯吧