feat: update prettierc

Author: JimmyLv

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

package.json

@@ -8,7 +8,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "format": "yarn prettier --write **/*.md",
+    "format": "prettier --write **/*.md",
     "lint": "textlint **/*.md",
     "lint:fix": "yarn lint --fix"
   },

前端/2014-09-26-write-article-use-jekyll-github-markdown.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: "写作环境的搭建（Jekyll+GitHub+Markdown）"
+title: '写作环境的搭建（Jekyll+GitHub+Markdown）'
 category: 前端
 tags: [Jekyll, 写作, Git]
 published: true

前端/2015-05-14-learning-reactjs.md

@@ -23,8 +23,8 @@ React 的创建是为了数据的频繁交互：通过组件化轻松展现数
 声明变量采用首字母小写
 
 ```js
-var myDivElement = <div className="foo" />;
-React.render(myDivElement, document.body);
+var myDivElement = <div className="foo" />
+React.render(myDivElement, document.body)
 ```
 
 ### 渲染 React 组件
@@ -34,9 +34,9 @@ React.render(myDivElement, document.body);
 ```js
 var MyComponent = React.createClass({
   /*...*/
-});
-var myElement = <MyComponent someProperty={true} />;
-React.render(myElement, document.body);
+})
+var myElement = <MyComponent someProperty={true} />
+React.render(myElement, document.body)
 ```
 
 ## 关于 JSX
@@ -97,19 +97,19 @@ var Component = React.createClass({
       <div {...this.props} title="zzz">
         this is a div
       </div>
-    );
+    )
   },
-});
+})
 
-React.render(<Component name="xxx" title="yyy" />, document.body);
+React.render(<Component name="xxx" title="yyy" />, document.body)
 ```
 
 ### style 属性
 
 在 React 中写行内样式时，要这样写，不能采用引号的书写方式
 
 ```js
-React.render(<div style={{ color: "red" }}>xxxxx</div>, document.body);
+React.render(<div style={{ color: 'red' }}>xxxxx</div>, document.body)
 ```
 
 ## UI 交互
@@ -119,14 +119,11 @@ React.render(<div style={{ color: "red" }}>xxxxx</div>, document.body);
 ```js
 var HelloWorld = React.createClass({
   render: function () {
-    return <div data-title={this.props.title}>{this.props.content}</div>;
+    return <div data-title={this.props.title}>{this.props.content}</div>
   },
-});
+})
 
-React.render(
-  <HelloWorld title="this is title" content="this is content" />,
-  document.body
-);
+React.render(<HelloWorld title="this is title" content="this is content" />, document.body)
 ```
 
 通过`this.props`我们可以拿到组件被使用时的属性，this.props 就是组件的属性集合。React 将组件的子节点封装到了 children 属性中，当子节点只有一个的时候直接通过`this.props.children`获取子节点的内容。当子节点的个数大于 1 时，`this.props.children`返回的是一个数组。
@@ -138,25 +135,22 @@ React.render(
 ```js
 var ColorButton = React.createClass({
   getInitialState: function () {
-    return { bColor: "green" };
+    return { bColor: 'green' }
   },
   render: function () {
     return (
-      <button
-        onClick={this.handleClick}
-        style={{ backgroundColor: this.state.bColor }}
-      >
+      <button onClick={this.handleClick} style={{ backgroundColor: this.state.bColor }}>
         click
       </button>
-    );
+    )
   },
   // 点击按钮，切换按钮的颜色：
   handleClick: function (event) {
-    this.setState({ bColor: this.state.bColor === "green" ? "red" : "green" });
+    this.setState({ bColor: this.state.bColor === 'green' ? 'red' : 'green' })
   },
-});
+})
 
-React.render(<ColorButton />, document.body);
+React.render(<ColorButton />, document.body)
 ```
 
 `getInitialState`是用来初始化 state，`handleClick`是用来处理我们点击事件的，如果想要拿到当前操作的 DOM，通过参数 event 获取。
@@ -172,32 +166,32 @@ var RenderComponent = React.createClass({
   render: function () {
     return (
       <ul>
-        {this.props["data-list"].map(function (item) {
-          return <li>{item}</li>;
+        {this.props['data-list'].map(function (item) {
+          return <li>{item}</li>
         })}
       </ul>
-    );
+    )
   },
-});
+})
 
 var StateComponent = React.createClass({
   getInitialState: function () {
-    return { list: ["xxx", "yyy"] };
+    return { list: ['xxx', 'yyy'] }
   },
   render: function () {
     return (
       <div>
         <button onClick={this.handleClick}>click</button>
         <RenderComponent data-list={this.state.list} />
       </div>
-    );
+    )
   },
   handleClick: function () {
-    this.setState({ list: [1, 2, 3] });
+    this.setState({ list: [1, 2, 3] })
   },
-});
+})
 
-React.render(<StateComponent />, document.body);
+React.render(<StateComponent />, document.body)
 ```
 
 React 还允许我们下面的方式自定义属性的默认值：
@@ -206,11 +200,11 @@ React 还允许我们下面的方式自定义属性的默认值：
 var ComponentWithDefaultProps = React.createClass({
   getDefaultProps: function () {
     return {
-      value: "default value",
-    };
+      value: 'default value',
+    }
   },
   /* ... */
-});
+})
 ```
 
 `getDefaultProps()`的值将会被缓存，当`this.props.value`的值没有被父组件指定时，将会使用这个默认值。
@@ -227,31 +221,23 @@ var Avatar = React.createClass({
         <ProfilePic username={this.props.username} />
         <ProfileLink username={this.props.username} />
       </div>
-    );
+    )
   },
-});
+})
 
 var ProfilePic = React.createClass({
   render: function () {
-    return (
-      <img
-        src={"http://graph.facebook.com/" + this.props.username + "/picture"}
-      />
-    );
+    return <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
   },
-});
+})
 
 var ProfileLink = React.createClass({
   render: function () {
-    return (
-      <a href={"http://www.facebook.com/" + this.props.username}>
-        {this.props.username}
-      </a>
-    );
+    return <a href={'http://www.facebook.com/' + this.props.username}>{this.props.username}</a>
   },
-});
+})
 
-React.render(<Avatar username="pwh" />, document.getElementById("example"));
+React.render(<Avatar username="pwh" />, document.getElementById('example'))
 ```
 
 上面的例子中，组件 Avatar 包含了组件 ProfilePic 和 ProfileLink。在 React 当中，**所有者就是可以设置其他组件 props 的组件**。说的通俗点：如果组件 X 出现在了组件 Y 的 render()方法中，那么组件 Y 就是所有者。正如我们之前所讨论的，组件不能改变 props—props 应同所有者初始化它们时保持一致。
@@ -269,16 +255,16 @@ React.render(<Avatar username="pwh" />, document.getElementById("example"));
 ```js
 var Component = React.createClass({
   render: function () {
-    var results = this.props.results;
+    var results = this.props.results
     return (
       <ol>
         {results.map(function (result) {
-          return <li key={result.id}>{result.text}</li>;
+          return <li key={result.id}>{result.text}</li>
         })}
       </ol>
-    );
+    )
   },
-});
+})
 ```
 
 ### 单向数据流

前端/2015-05-31-reactjs_tutorial_part_1.md

@@ -139,10 +139,7 @@ block content
 接下来我们在`public/javascripts/src/`目录中创建一个简单的 react.js 组件，`helloworld.jsx`：
 
 ```js
-React.render(
-  <h1>Hello, world from React.js!</h1>,
-  document.getElementById("example")
-);
+React.render(<h1>Hello, world from React.js!</h1>, document.getElementById('example'))
 ```
 
 > Because we are using the `react-tools` node package, we want to add the compiled javascript code to our templates. Change you `views/layout.jade` file to the following:

前端/2015-06-06-reactjs_tutorial_part_2.md

@@ -35,11 +35,11 @@ $ npm install --save-dev gulp
 Gulp 安装好之后，我们建立一个`gulpfile.js`文件：
 
 ```js
-var gulp = require("gulp");
+var gulp = require('gulp')
 
-gulp.task("default", function () {
+gulp.task('default', function () {
   // place code for your default task here
-});
+})
 ```
 
 > Now we need to install the Gulp packages that we will need to build our application. To start, let's install [browserify](https://www.npmjs.com/package/browserify), [reactify](https://www.npmjs.com/package/reactify) and [vinyl-source-stream](https://www.npmjs.com/package/vinyl-source-stream). To install these packages, run the following command:
@@ -71,21 +71,21 @@ $ npm install --save-dev react browserify reactify vinyl-source-stream
 下一步就是编写 Gulp 任务来将`.jsx`文件自动编译成可用的 JavaScript 文件。一个 Gulp 任务就是一个函数，包含编译文件的一系列步骤。我们需要修改`gulpfile.js`：
 
 ```js
-var gulp = require("gulp");
+var gulp = require('gulp')
 
-var browserify = require("browserify");
-var reactify = require("reactify");
-var source = require("vinyl-source-stream");
+var browserify = require('browserify')
+var reactify = require('reactify')
+var source = require('vinyl-source-stream')
 
-gulp.task("js", function () {
-  browserify("./public/javascripts/src/app.jsx")
+gulp.task('js', function () {
+  browserify('./public/javascripts/src/app.jsx')
     .transform(reactify)
     .bundle()
-    .pipe(source("app.js"))
-    .pipe(gulp.dest("public/javascripts/build/"));
-});
+    .pipe(source('app.js'))
+    .pipe(gulp.dest('public/javascripts/build/'))
+})
 
-gulp.task("default", ["js"]);
+gulp.task('default', ['js'])
 ```
 
 > Now running `gulp` from the command line will trigger the build of our React app; however, there are some things we need to do to our react app first!
@@ -103,10 +103,10 @@ gulp.task("default", ["js"]);
 首先，我们需要为 browersify 创建一个入口，建立一个`app.jsx`文件就可以了：
 
 ```js
-var React = require("react");
-var HelloWorld = require("./HelloWorld.jsx");
+var React = require('react')
+var HelloWorld = require('./HelloWorld.jsx')
 
-React.render(<HelloWorld />, document.getElementById("example"));
+React.render(<HelloWorld />, document.getElementById('example'))
 ```
 
 > This file is taking our `HelloWorld` component and rendering it in the div with id "example". This code is taken from our original `helloworld.jsx` file from last tutorial. Instead of doing everything in that file, we are now requiring a module `HelloWorld` and rendering it in `app.jsx`. The reason for this is that as our application gets more complex, we have more control of how our files are broken out.
@@ -118,13 +118,13 @@ React.render(<HelloWorld />, document.getElementById("example"));
 下一件事是已有的`helloworld.jsx`文件修改成 React 组件，`HelloWorld.jsx`：
 
 ```js
-var React = require("react");
+var React = require('react')
 
 module.exports = React.createClass({
   render: function () {
-    return <h1>Hello, world from a React.js Component!</h1>;
+    return <h1>Hello, world from a React.js Component!</h1>
   },
-});
+})
 ```
 
 > Notice that the `HelloWorld.jsx` and `app.jsx` files are combined to be very similar to how the 'helloworld.jsx' looked. Again, the reason for breaking our app into these two files are for future modules to be added.
@@ -159,17 +159,17 @@ body
 为了更好得使用 Gulp，我们可以实现一个内建的`watch`功能，能够自动监测和编译`.jsx`文件。添加任务：
 
 ```js
-gulp.task("watch", function () {
-  gulp.watch("public/javascripts/src/**/*.jsx", ["js"]);
-});
+gulp.task('watch', function () {
+  gulp.watch('public/javascripts/src/**/*.jsx', ['js'])
+})
 ```
 
 > Also add that task to your default Gulp task:
 
 同时将`watch`任务添加到默认任务中：
 
 ```js
-gulp.task("default", ["js", "watch"]);
+gulp.task('default', ['js', 'watch'])
 ```
 
 > Now when we run `gulp` it will watch for changes in our `.jsx` and rebuild our javascript with that change! Awesome!

前端/2015-06-22-reactjs_tutorial_part_interlude.md

@@ -105,11 +105,11 @@ $ bower install bootstrap-sass-official --save
 现在`bootstrap-sass-official`库已经安装好，我们可以将我们想要使用的 Bootstrap 更新到`style.scss`。到现在为止，我们直接导入整个 bootstrap 库，让我们更新`style.scss`如下所示：
 
 ```css
-@import "../../libraries/bootstrap-sass-official/assets/stylesheets/bootstrap";
+@import '../../libraries/bootstrap-sass-official/assets/stylesheets/bootstrap';
 
 body {
   padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif;
 }
 
 a {
@@ -163,8 +163,8 @@ link(rel='stylesheet', href='/stylesheets/css/style.css')
 在介绍 Twitter Bootstrap 之后，我们还需要加入新的 JavaScript 库：jQuery。由于我们已经可以将 JSX 代码编译成 JavaScript，让我们花点时间把 JavaScript 连接到单个`app.js`中。只需要告诉 JSX 导入相应的库即可，由于我们已经使用了 browserify，所以很简单就可以加入到`app.jsx`文件：
 
 ```js
-var $ = (jQuery = require("../../libraries/jquery/dist/jquery"));
-var bootstrap = require("../../libraries/bootstrap-sass-official/assets/javascripts/bootstrap");
+var $ = (jQuery = require('../../libraries/jquery/dist/jquery'))
+var bootstrap = require('../../libraries/bootstrap-sass-official/assets/javascripts/bootstrap')
 ```
 
 > Doing this points both `jQuery ($)` and `bootstrap` to the appropriate file which were installed via Bower. When we re-run our browserify gulp task, these two libraries get pulled in! Simple as that.