首页
吐槽
友链
关于
Search
1
【React Native】如何拨打电话?
782 阅读
2
WHMCS官方最新版下载+开心教程
759 阅读
3
为TypeScript项目添加Eslint和Prettier
524 阅读
4
React Native原理和架构
360 阅读
5
本站免费提供微软office A1P、A1账号
306 阅读
前端开发
后端开发
源码分享
技术分享
生活娱乐
影视评价
闲言碎语
登录
Search
标签搜索
ios
前端
JavaScript
阿里
Teambition
typecho
小火箭
shadowsocks
React
React Native
SQL
eslint
prettier
typescript
GraphQL
WHMCS
WHMCS开心版
Zsh
on-my-zsh
代理
夜雨
累计撰写
31
篇文章
累计收到
46
条评论
首页
栏目
前端开发
后端开发
源码分享
技术分享
生活娱乐
影视评价
闲言碎语
页面
吐槽
友链
关于
搜索到
13
篇与
技术分享
的结果
2022-03-12
VSCode使用Settings Sync同步配置
VSCode使用Settings Sync同步配置准备教程{dotted startColor="#ececec" endColor="#ececec"/}正常运行的VSCode,以及一个GitHub账号或者微软账号(作者使用的是GitHub,不过应该都是一样)安装Settings Sync点击VSCode的插件搜索Settings Sync然后安装安装完之后会自动弹出一个登录界面,然后点击LOGIN WITH GITHUB点击后会自动打开浏览器,然后登录你的GitHub账户即可,如果你之前用过的话,会出现你最近使用的。如果没有自动添加gist id的话就手动点击插件的设置添加gist这里如果你是在vscode insider下面第一次使用这个软件,不用去创建什么gits Tonken,直接F1或者ctrl + shift + p搜索sync再选择 Sync: Upload / Update Settings 后会直接生成一个gits id(记得存好这个id 将来可能用的是)然后会自动上传你当前的插件及设置信息,点开插件栏选择此插件的设置就可以看到自动生成的gist id了,保存好这个id 在其他的的电脑上就可以使用这个id同步设置了,如果你不是很熟练使用这个的话,或者插件更新的不频繁的话,我个人建议关掉自动同步,自己手动上传和下载设置
2022年03月12日
57 阅读
0 评论
0 点赞
2022-03-12
oh-my-zsh目录权限问题
问题You have mail. [oh-my-zsh] Insecure completion-dependent directories detected: drwxrwxrwx 7 hans admin 238 2 9 10:13 /usr/local/share/zsh drwxrwxrwx 6 hans admin 204 10 1 2017 /usr/local/share/zsh/site-functions [oh-my-zsh] For safety, we will not load completions from these directories until [oh-my-zsh] you fix their permissions and ownership and restart zsh. [oh-my-zsh] See the above list for directories with group or other writability. [oh-my-zsh] To fix your permissions you can do so by disabling [oh-my-zsh] the write permission of "group" and "others" and making sure that the [oh-my-zsh] owner of these directories is either root or your current user. [oh-my-zsh] The following command may help: [oh-my-zsh] compaudit | xargs chmod g-w,o-w [oh-my-zsh] If the above didn't help or you want to skip the verification of [oh-my-zsh] insecure directories you can set the variable ZSH_DISABLE_COMPFIX to [oh-my-zsh] "true" before oh-my-zsh is sourced in your zshrc file.刚开始的时候根本不知道是什么问题,后来在oh-my-zsh上查了下,发现竟然有人也有遇到此问题,虽然很久之前了。https://github.com/robbyrussell/oh-my-zsh/issues/6835 在上面看到说执行下面命令就可以解决,但是对我好像没什么用。chmod 755 /usr/local/share/zsh chmod 755 /usr/local/share/zsh/site-functions后面我就在.zhsrc中加入ZSH_DISABLE_COMPFIX=true,刚开始加入到最后一行发现根本不行,之后查看了下issues看到有人说必须添加到 第一行,然后就试了下,发现可以了。至此问题就解决了。
2022年03月12日
86 阅读
0 评论
0 点赞
2022-03-11
Zsh终端走代理
在~/.zshrc配置文件中添加下面一段,以后使用的时候直接输入proxy打开代理模式,关闭代理事输入noproxy即可。vim ~/.zshrc # where proxy proxy () { export http_proxy="https://127.0.0.1:7890" export https_proxy="https://127.0.0.1:7890" echo "HTTP Proxy on" } # where noproxy noproxy () { unset http_proxy unset https_proxy echo "HTTP Proxy off" }由于本人使用的Clash X的软件作为代理,所以默认代理端口为7890,如果使用其他代理请注意端口。
2022年03月11日
70 阅读
0 评论
0 点赞
2021-06-25
GraphQL 入门: 简介
GrqphQL是Facebook开发的一个应用层查询语言,后端定义基于图的模式,客户端可以按需查询需要的数据。上图所示,查询流程分为几个步骤,涉及多个组件,包括客户端应用程序(Web,手机,桌面APP),一个GraphQL服务器用于解析查询,以及多个不同的数据来源。客户端数据要求发生变化时,不需要修改后端。因此,你不必因为客户端数据需求的变更而改变你的后端。这解决了管理REST API中最大的问题。为什么解决了RESE API的大问题,看如下阐述:注解:只要你的义务模型没有发生变化,数据模型就不会发生变化,那么我们就不需要修改后端API。前端只需要按需要的字段进行查询即可。如果业务发生了变化,那么我们只需要修改GrqphQL的模型定义。并且实现对应的服务端数据查询逻辑即可。但是传统REST查询是固定,客户端不能指定,GraphQL可以让客户端指定要获取那么手写字段的数据,给客户端带来了极大的灵活性。GraphQL同样能够让客户端高效的获取数据,例如,看下面这个请求:{ latesPost { _id title content author { name } comments { content author { name } } } }这个请求获取了一遍博客文章和对应评论与作者信息的数据,下面是请求的返回结果:{ "data": { "latestPost": { "_id": "03390abb5570ce03ae524397d215713b", "title": "New Feature: Tracking Error Status with Kadira", "content": "Here is a common feedback we received from our users ...", "author": { "name": "Pahan Sarathchandra" }, "comments": [ { "content": "This is a very good blog post", "author": { "name": "Arunoda Susiripala" } }, { "content": "Keep up the good work", "author": { "name": "Kasun Indi" } } ] } } }如果你使用的是REST的话,你需要调用多个REST API的请求才能获取这些信息。
2021年06月25日
64 阅读
0 评论
1 点赞
2021-06-25
为TypeScript项目添加Eslint和Prettier
众所周知,代码质量检查和代码风格的统一对于一个项目来说非常的重要,也有助于避免一些低级的错误。相信很多人都已经在JavaScript项目中使用ESLint和Prettier了,但我猜大多数人不太清楚如何在TypeScript项目中进行配置,本文就来介绍具体的配置步骤。为TypeScript设置ESLint让ESLint支持TypeScriptESLint本身不是为了TypeScript设计的,但是它能通过配置parser来支持不同的语言,进而实现对TypeScript代码的检查和修复。yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --deveslint: ESLint库本身@typescript-eslint/parser: TypeScript团队提供的ESLint parser,用于实现支持TypeScript代码的lint@typescript-eslint/eslint-plugin: ESLint插件,包含一系列TypeScript相关的ESLint规则然后,添加在项目根目录添加.eslintrc.js,一个基本的例子如下:module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:@typescript-eslint/recommended', // 使用推荐的规则,来自@typescript-eslint/eslint-plugin ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 }, rules: { // 此处书写需要覆盖的配置 // 例如,"@typescript-eslint/explicit-function-return-type": "off", }, };其中有些细节值得一提:extends部分的plugin:@typescript-eslint/recommended是可选的,但对于绝大多数项目推荐使用,如果有不合适的可以单独调整。另外,在配置plugin:@typescript-eslint/recommended-requiring-type-checking中还包含了一系列依赖类型信息的规则,这些规则能帮助你更好的规范代码,但可能会带来一些性能上的损耗,相关信息详见 此处 。parserOptions支持的配置可以分别在ESLint文档和@typescript-eslint/parser的README中查阅,在配置ESLint支持React和需要类型信息的规则时会用到。配置PrettierPrettier和ESLint是两个独立的工具,Prettier专注于代码格式化,而ESLint专注于代码质量检查(顺便提供了一些修复)。Prettier的格式化和eslint --fix都会涉及代码风格的调整,有时二者会发生冲突。目前社区中处理这个问题的工具有以下几种:prettier-eslint:这是一个JS模块,其处理方式是将代码先由Prettier处理一次,再将输出进行eslint --fix得到最终结果。已不推荐使用。eslint-plugin-prettier:这是一个ESLint插件,该插件实现了一系列额外的ESLint规则。这些规则使用Prettier来检查代码格式,如果格式与Prettier期望的不同,会抛出对应的ESLint错误。同时这些错误在eslint --fix时会交由Prettier进行修复。eslint-config-prettier:这是一个ESLint配置,该配置将可能与Prettier冲突的规则关闭,从而使得你能将Prettier于其他的ESLint配置(如eslint-config-airbnb)一起使用。目前推荐的实践是将eslint-plugin-prettier和eslint-config-prettier结合使用,下面就介绍如何进行配置。首先需要安装相关依赖:yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev然后在根目录添加Prettier的配置文件:module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 120, tabWidth: 4, // 格式与eslint的overrides一致 "overrides": [ { "files": "*.json", "options": { tabWidth: 2 } }, { "files": ["*.html", "legacy/**/*.js"], "options": { printWidth: 240 } } ] };最后更新ESLint的配置即可:module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:react/recommended', // 使用react的推荐规则 'plugin:@typescript-eslint/recommended', // 使用推荐的规则,来自@typescript-eslint/eslint-plugin 'plugin:prettier/recommended', // 使用eslint-plugin-prettier推荐的配置,注意需要在最后一个 ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 ecmaFeatures: { jsx: true, // 支持解析JSX }, }, rules: { // 此处书写需要覆盖的配置 // 例如,"@typescript-eslint/explicit-function-return-type": "off", }, settings: { react: { version: 'detect', // 让eslint-plugin-react自动检测react版本 }, }, };extends字段中添加的plugin:prettier/recommended是eslint-plugin-prettier提供的推荐配置,其中引用了eslint-config-prettier并设置相应的规则,这个配置相当于:{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } }有时候会在网上的文章中看到,extends字段中除了prettier外还有prettier/react之类的配置,但从eslint-config-prettier的8.0.0版本开始只需要一个prettier就能引入全部配置了
2021年06月25日
524 阅读
0 评论
0 点赞
1
2
3