开发利器新

charles

代理
在菜单的proxy下：http的proxy设置，https（ssl）的proxy设置。
在菜单的help下：可以安装电脑证书（install）和手机证书（install remote）。
手机和电脑连接同一wifi，在手机上设置电脑ip代理，端口默认8888.
然后手机就可以访问电脑能访问的网址了（比如本地开发的网址，公司的gitlab，wiki等需要vpn才能访问的网址）
手机安装证书，小米手机从设置中的更多设置中的系统安全选择从存储设备安装（注意使用的浏览器。chrome浏览器下载完会自动安装）
ps：有的时候charles会不知道为什么，明明都正确配置了，但是手机打不开。这时就换了替补抓包工具用，不知啥时候charles又能用了。
破解版安装包：待定

sketch

按住alt按键可以量间距，选中图层，右下的加号导出，菜单选项选择slice可以切图，勾选背景透明和去掉毛边，（实测切图并没有背景透明）。还有个什么content only，不知道能不能，没有找到。
安装sketch meature插件，选择plugins中的导出规范可以导出html格式的ui。网上搜破解版。

用电脑调试手机页面

chrome（需要数据线，需要翻墙）
spy-debugger
安装npm i spy-debugger -g
运行spy-debugger initCA
然后打开users下的xxx下的node-mitmproxy下的crt证书发给手机，手机安装上
手机http代理 电脑ip端口默认9888 ，改写端口可用spy-debugger -p 8888
启动spy-debugger

nginx

npm安装nginx，启动sudo nginx,重启sudo nginx -s reload,测试sudo nginx -t,杀死ps -ef|grep nginx，kill -QUIT 2072，kill -TERM 2132，kill -INT 2132

nginx.config文件配置：
server name和port：就是监听网络请求的域名和端口，当匹配时就走location
location：中断原始客户端的请求，将请求代理到此处写的ip和port上，然后这个ip:port返回东西。
rewrite：可重写path 转换成另外一种有的目标path
本地启动时，可用nginx代理域名到127.0.0.1,请求的接口，代理到后台人员的服务器上。那么当本地启动时就可以用https://www.aa.com了，而不是用host更改的 http://www.aa.com:3000这种

ps：公司解决跨域问题：接口代理到服务器上不就行了吗，然而本地启动的localhost还是报跨域错误，需要把前端网址域名代理到localhost上，并且host配置dns，才ok。原因目前不知。

mock数据

easymock

vscode

git功能很好用：
可以创建分支，切换分支。
点击git的树枝图标，先点加号的add，然后在input框中输入提交msg，在点对号commit，在点三个点的push，pull，切换分支等，特别注意的是：合并分支的方法，在当前分支下pull from origin/master 就是将master合到本分支了
还有一些插件：
vetur：vue的language server，不解释。

auto-close-tag：在输入左标签时自动添加右标签（From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.）。

auto-rename-tag：在更改左标签时自动更改右标签。

eslint：不解释。

gitlens：git相关支持，甩锅用。

Javascript(ES6) code snippets：常用es6代码段。clg(console.log)，详见说明。

npm：package.json npm包检查。

npm intellisense：导入npm包时给予提示。

Path Autocomplete：路径智能提示（配置见下方）（不使用更老牌的Path intellisense是因为这个插件配置alias有bug）。

Highlight Matching Tag：选中某个标签时，左右标签高亮显示，方便阅读复杂项目捋清结构。

（下边的不那么重要，但是也还不错）

open in browser：可以右击直接打开html文件。

language-stylus：stylus支持，自己不用但是尤雨溪喜欢用。

import cost：看看引入的包有多大。

Color info：查看颜色rgb。

Gitconfig Syntax：高亮git相关配置文件。

Simple icons：vs图标。

eslint

在vscode安装eslint，在vscode的偏好设置里的设置里搜eslint，可以编辑setting.json文件
就可以设置敲代码时画红线提示错误，保存时自动fix eslint err。
（ps如果只是右键的format格式化，风格会不是eslint规范）

{
    "editor.formatOnPaste": false,//
    "editor.formatOnSave": false,//编辑器在保存时是否格式化（注意格式化的风格不一定是eslint风格）
    "editor.formatOnType": false,
    "explorer.confirmDelete": false,
    
    "eslint.autoFixOnSave": true,//这里才是设置是否保存时eslint修复 和format那个开关似乎矛盾了
    "eslint.enable": true,//是否开启eslint，这是前提
    "eslint.validate": [// eslint作用的文件，没写的话就没有文件会报错
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],
   //还有其他可以设置的，比如eslint.config

   

}

公司的项目用npm安装eslint等插件，初始化eslintrc文件，里面的rule写eslint检查代码的规则，当这个项目的代码保存时就会按照这里所写的规则自动修复了，偶尔会有检测失效的情况，随便改下setting.json文件，关闭vscode在重启就可以了。

至于网上说的在setting.json文件配置的如下，不知道是什么作用，我没用上：

 //  #让prettier使用eslint的代码格式进行校验 
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号 
    "prettier.semi": false,
    //  #使用带引号替代双引号 
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行