1

npm i -D eslint eslint-config-alloy eslint-config-prettier eslint-plugin-react prettier prettier-eslint

.eslintrc.js

1
2
3
4
5
6
7

module.exports = {
    extends: [
        'eslint-config-alloy/react',
        'eslint-config-prettier',
        'eslint-config-prettier/react',
    ],
};

.prettierrc.js

1
2
3
4
5
6

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    semi: true,
    tabWidth: 4,
};

安卓/iOS 可以调用 JS 侧的全局对象来完成通信，那么使用 React/Vue 的时候我们的方法都封装在框架内部，并没有暴露在全局，原生侧调不到框架内部的方法，怎么办？

某日，同事 J 说发现一个奇怪的现象：一个列表页，在 iPhone7 竖屏上字体大小正常，横屏的时候有些字体就变的特别大。本文便是笔者对这一 “bug” 的分析过程。

目前主流的前端框架在开发的时候都采用最新的 ES6+ 语法，大部分的向下兼容工作都交给了 Babel 来处理。通过引入 Babel 插件，我们可以大胆地使用最新或是正在起草中，甚至是根本不在标准中的 jsx 等语法，跟甚至是你自己胡诌的写法！

本文将带大家了解 Babel 是怎么工作的、Babel 插件是怎么工作又是怎么编写的，并写一个与 webpack 集成的最简单的 Babel 插件。

媒体查询 @media

我们开发一个网站的时候希望在手机端、iPad 端、PC 端都有良好的体验，CSS 给我们提供了一个强大的条件判断语法，可以根据设备的宽度来设置不同的样式，从而实现不同的设备应用不同的布局。

下图展示了利用 @media 实现的同一页面手机端 2 列、iPad 端 3 列、PC 端 4 列的布局。

一直都觉得 npm 版本号没什么好注意的，直到今天掉到坑里了，爬了一下午才爬出来，特作此文，加深印象，提醒自己。