让code变得更加愉悦之字体与代码格式化

前言

总觉得是代码结构和设计模式的不足，而导致code时越来越没兴趣，但当我偶然间看到Fira Code的字体，结合代码格式化插件Prettier，搬砖又变得有了意义。
注：笔者使用的VS Code编辑器

目录

1.Fira Code安装
2.Prettier使用

Fira Code 安装

1.下载Fira Code，github地址：https://github.com/tonsky/FiraCode
这里选择下载最新的：Fira_Code_v5.2.zip

2.安装字体（这里以mac为示例）
双击解压zip文件，command + Space打开搜索框，输入字体册，

image.png
选择"+"号添加字体，然后选择字体文件解压目录进行安装。
image.png
3.设置VS Code字体，重启生效。

Fira Code, Menlo, Monaco, 'Courier New', monospace

image.png

Prettier 使用

1.打开VS Code，插件栏搜索Prettier，点击install。

image.png
2.Shift + Option + F（mac）、Shift + Alt + F（win）快捷键可进行代码格式化
image.png
3.通过给项目添加prettier.config.js配置文件可进行格式化配置，避免和eslint的冲突。

module.exports = {
    // tab缩进大小,默认为2
    tabWidth: 4,
    // 使用tab缩进，默认false
    useTabs: false,
    // 使用分号, 默认true
    semi: false,
    // 使用单引号, 默认false
    singleQuote: true,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    TrailingCooma: 'none',
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    bracketSpacing: true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    jsxBracketSameLine: false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    arrowParens: 'always',
}

尾语

现在感觉无论是观摩同伴的代码还是搬砖，都舒服了😌😌😌