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同步设置了,如果你不是很熟练使用这个的话,或者插件更新的不频繁的话,我个人建议关掉自动同步,自己手动上传和下载设置

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看到有人说必须添加到 第一行，然后就试了下，发现可以了。至此问题就解决了。

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，如果使用其他代理请注意端口。

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的请求才能获取这些信息。

为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就能引入全部配置了