今天我想让 Eslint 使用 Standard 代码风格来检查 JavaScript 代码,又折腾了许久。
其实弄明白了就简单了,安装这些依赖的 npm 包:
npm install -g standard eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
如果不想全局安装,你也可以把 -g 改为 -D 进行本地安装。
安装完之后,在 .eslintrc 配置文件的 extend 规则里添加 standard,如:
{ "extends": ["standard"] }
重启项目,如果 ESlint 没有报错信息,应该就可以使用 Standard 规则检查代码了。
Read More →
ESlint 使用 Standard 代码风格
vue-cli 里要用 scss,遂安装两个模块:
npm install sass-loader --save-dev npm install node-sass --save-dev
以前也是这样的,没有问题,这次编译时却报错了:
Module build failed: Error: Cannot find module 'node-sass'
我就奇了怪了。node-sass 正常安装进去 node_modules 文件夹了,怎么还找不到。用 npm 时不时就遇坑,特别是以前没问题的地方,忽然蹦出来给你搞个幺蛾子,还找不到原因,烦死了。
之后我在网上搜索,检查了以下因素:
node-sass 安装是否完整?我是开着全局 ssr 的,不会是下载不完整。但为了死马当活马医,我还是移除它然后重新安装,不行。换用 cnpm 安装也还是不行。
检查版本,安装的版本确实是最新版本啊。
还有的说要 build 使用,执行 npm rebuild node-sass --force,报错。(其实不需要)
最后怎么解决的呢?强制删除 node_modules 文件夹,然后 npm i
重新安装所有包,这下好了。心累。
NPM Module build failed: Error
CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。
首先安装 UnCSS:
npm install -g uncss
之后指定要分析的页面的 url,并设置输出的文件名:
uncss http://127.0.0.1:5500/index.html > styles.css
如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。
上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。
使用 UnCSS 移除冗余的 CSS 规则
刚才我在折腾用 npm 安装 Webpack,但是速度非常捉急,开 vpn 也不行。经过搜索我找到了淘宝 NPM 镜像。
在淘宝的使用说明里,建立了一个 cnpm 的命令,注册到淘宝的 npm 源。但是我执行之后,系统识别不出 cnpm 命令,所以我换了个方法。
在 npm 的安装目录里找到文件名为 npmrc 的文件(可以使用 everything 直接搜索),编辑它,在最后一行添加如下命令并保存:
registry=https://registry.npm.taobao.org
之后照常使用 npm 命令就行了,安装速度果然飞快,再也不用烦恼啦~