eslint

Spread operator and EsLint

由 爷，独闯天下 提交于 2020-08-19 01:09:36
问题 I want to copy object and change one of its field. Something like this: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SHOW_TAG_PANEL: console.log(state); return { ...state, showTagPanel: true }; default: return state; } } This code works fine, but eslint show me error Unexpected token (14:8) 12 | 13 | return { > 14 | ...state, | ^ 15 | showTagPanel: true 16 | }; 17 | Here is my .eslintrc: {

Spread operator and EsLint

由 扶醉桌前 提交于 2020-08-19 01:04:27
问题 I want to copy object and change one of its field. Something like this: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SHOW_TAG_PANEL: console.log(state); return { ...state, showTagPanel: true }; default: return state; } } This code works fine, but eslint show me error Unexpected token (14:8) 12 | 13 | return { > 14 | ...state, | ^ 15 | showTagPanel: true 16 | }; 17 | Here is my .eslintrc: {

从零搭建 React 开发 H5 模板

由 夙愿已清 提交于 2020-08-17 12:55:55
本文相关代码地址： github 效果展示： react-demo 项目创建 创建项目文件夹 mkdir react-demo cd react-demo npm init -y 复制代码 依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev 复制代码 webpack 配置 区分开发环境 development 和生产环境 production 配置 分别创建对应的 配置文件 antd-mobile 按需加载 安装插件 yarn add babel-plugin-import -D 复制代码 修改 babel.config.js 配置 module .exports = { presets : [ "@babel/preset-env" , "@babel/preset-react" ]

使用 React Hooks 结合 EventEmitter

由 岁酱吖の 提交于 2020-08-16 08:16:32
EventEmitter 很适合在不修改组件状态结构的情况下进行组件通信，然而它的生命周期不受 react 管理，需要手动添加/清理监听事件很麻烦。而且，如果一个 EventEmitter 没有使用就被初始化也会有点麻烦。 目的 所以使用 react hooks 结合 event emitter 的目的便是 添加高阶组件，通过 react context 为所有子组件注入 em 对象 添加自定义 hooks，从 react context 获取 emitter 对象，并暴露出合适的函数。 自动清理 emitter 对象和 emitter listener。 实现 实现基本的 EventEmitter 首先，实现一个基本的 EventEmitter，这里之前吾辈曾经就有 实现过 ，所以直接拿过来了。 type EventType = string | number export type BaseEvents = Record<EventType, any[]> /** * 事件总线 * 实际上就是发布订阅模式的一种简单实现 * 类型定义受到 {@link https://github.com/andywer/typed-emitter/blob/master/index.d.ts} 的启发，不过只需要声明参数就好了，而不需要返回值（应该是 {@code void}） */

vscode配置 eslint +prettier

由 我的未来我决定 提交于 2020-08-16 06:14:20
{ "editor.fontFamily" : "Menlo, Consolas, 'Courier New', monospace" , "editor.fontLigatures" : true , "editor.fontSize" : 24 , "editor.fontWeight" : "500" , "editor.lineHeight" : 24 , "editor.lineNumbers" : "on" , "editor.minimap.enabled" : false , "editor.renderIndentGuides" : false , "editor.rulers" : [ 120 ] , "editor.formatOnPaste" : true , "workbench.colorTheme" : "One Dark Pro" , "explorer.confirmDelete" : false , "terminal.integrated.fontFamily" : "monospace" , "editor.formatOnType" : false , "editor.formatOnSave" : true , "eslint.validate" : [ "javascript" , "javascriptreact" , {

基于 Travis CI + PM2 实现 NodeJS 应用的持续集成和部署

由 天涯浪子 提交于 2020-08-16 01:35:57
前言 我发现一旦手头的项目变多，且随着项目复杂度的提升，本来编码就已经是个够头痛的问题，再加上部署到生产环境就更心累了 😵。 之前在公司实习时，有一个 依据用户输入网址进行截屏 的项目，同时包含了 React 应用和 Node 应用。 部署 React 应用比较方便，只要通过 scp 将 build 后的 dist 目录放置在服务器上。 而 Node 应用则较为复杂： 由于它使用 TS 编写，同样需要将 build 后 dist 目录放置在服务器上 在根目录下新建目录并使用 chmod 修改权限，用于暂时放置截屏快照 更新 npm 包 重启 PM2（Node 进程管理工具） 在项目初期，版本迭代非常快，我每天都要反复执行以上步骤数次，waste time! 何况，在标准的开发流程中，我们还需引入 单元测试 、 覆盖率报告 、 代码风格检测 ……，并将应用部署到 不同环境的服务器 （开发、测试、生产）中，这无疑是一项繁琐的工作，本着 不想当运维的前端不是一个好全栈 的核心思想，我迫切需要解放我的双手。 TIP：结尾有源码链接 CI & CD 所谓前人栽树，后人乘凉，我的诉求早就在开发领域中被定义为两个专有名词： 持续集成（Continuous Integration），简称 CI 持续部署（Continuous Deployment），简称 CD 听起来很高大上

前端开发工具vscode插件推荐及配置

由 笑着哭i 提交于 2020-08-15 01:46:43
vscode插件推荐 vscode 配置 ESLint "files.autoSave": "off", "eslint.validate": [ "javascript", "javascriptreact", "html", { "language": "vue", "autoFix": true } ], "eslint.options": { "plugins": [ "html" ] }, "eslint.autoFixOnSave": true, Vscode + Prettier "prettier.singleQuote": true, "prettier.semi": false, "prettier.eslintIntegration": true, "prettier.printWidth": 120, "editor.formatOnSave": true, Vscode + Vetur "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap

关闭特定行的eslint规则

由 二次信任 提交于 2020-08-14 15:07:38
问题： In order to turn off linting rule for a particular line in JSHint we use the following rule: 为了关闭JSHint中特定行的linting规则，我们使用以下规则： /* jshint ignore:start*/ $scope.someVar = ConstructorFunction(); /* jshint ignore:end */ I have been trying to locate the equivalent of the above for eslint. 我一直试图找到相当于以上的eslint。 解决方案： 参考一： https://stackoom.com/question/1sMPh/关闭特定行的eslint规则 参考二： https://oldbug.net/q/1sMPh/Turning-off-eslint-rule-for-a-specific-line 来源： oschina 链接： https://my.oschina.net/u/4438370/blog/4493919

node内存泄漏总结

由 眉间皱痕 提交于 2020-08-13 04:02:51
1. node内存泄漏情形 1.1 全局变量 全局变量不会被回收，需要手动设置为null或undefined 1.2 闭包 function out() { 　　const bigData = new Buffer(100 ); 　　inner = function () { 　　　　 void bigData; 　　} } 比如闭包中的变量被全局对象引用，则闭包中的局部变量，不能释放。inner是全局对象，bigData是局部变量。 1.3 缓存 服务器有并发和长时间运行的情况，若使用memoize等本地缓存，缓存的key长时间不能释放，会造成内存泄漏 1.4 监听器 事件监听器或socket listen错误的重复添加，忘记移除，会造成内存泄漏 2. node内存泄漏排查方式 2.1 首先从系统层面 用系统工具，观察内存和CPU使用变化，持续升高，则是内存泄漏 2.2 node-heapdump抓取快照 node-heapdump抓取内存快照, 得到profile文件，chrome的Memory工具，load profile文件，可以将多个profile导入，通常要3个，方便对比。 可以查看哪些对象有异常，对比3次的profile的差异。 具体可参考 Node.js 性能调优之内存篇(二)——heapdump 3. 避免内存泄漏 3.1 ESLint规范代码 3.2

vue eslint 自动修复

由 主宰稳场 提交于 2020-08-13 01:01:19
vue 脚手架 2 在 webpack.base.conf.js 中如下位置加 fix：true { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: "pre", include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), fix: true } }, 来源： oschina 链接： https://my.oschina.net/liyoungs/blog/4345361
订阅 eslint