1、vscode代码保存时自动格式化成 ESLint风格(支持VUE) : http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html
另,vscode中非webpack等一些构建工具项目,也可以使用eslint风格。但是需要额外安装eslint包,生成.eslintrc.*文件: https://segmentfault.com/a/1190000009077086(亲测有效)
npm install eslint --save-dev
项目目录下创建一个 .eslintrc.*
的配置文件或 使用命令行(./node_modules/.bin/eslint --init,推荐这种方法
)生成这个文件。具体规则可以自己根据需要定制的 https://www.cnblogs.com/yesu/p/7852527.html。
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "rules": { "indent": [ "error", 4 ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "single" ], "semi": [ "error", "never" ] } };
重点:eslint包不依赖于webpack,依赖于node。node对项目结构没有侵入性,只是在根目录下生成一个 node_modules文件夹 和 package.json文件。eslint功能再添加一个配置文件。
注意:eslint可以忽视指定某个或某类文件,创建 .eslintignore 文件进行配置。如:
/build/
/config/
/dist/
/static/js/*.js
/*.js
2、VSCODE编辑器常用插件推荐 : https://blog.csdn.net/Che_rish/article/details/78893019
3、特殊功能 快捷方式:
a、 js 的注释模板 (注意:新版的vscode已经原生支持,在function上一行输入 /** tab)
4、vscode 调试node.js :https://www.cnblogs.com/klsw/p/7765427.html
我的常用插件:
1、ESLint 配置: http://www.ptbird.cn/vscode-autosave-eslint-support-vue.html
4、编辑器中文插件
5、View In Browser 文件协议打开
6、Live Server 本地服务器打开(这个服务器具有文件修改 自动刷新功能的。)
7、Path Intellisense 自动路劲补全
8、Bracket Pair Colorizer 让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
9、Vetur vue文件的语法高亮
10、Todo Tree http://www.cnblogs.com/qiezuimh/p/9549545.html 显示代码中 TODO
,FIXME 的
注释。(个人觉得可以只用TODO来标记,因为两个都是需要去改动代码的,所以都是未完成状态)
11、Git Graph 版本树显示插件,比小乌龟git的好用。
5、vscode编辑器,默认可以使用命令行,打开编辑器:https://www.jianshu.com/p/274ca1b20dc1
code base.conf // 文件路径可以使用 tab 键自动补全的
6、vscode快捷方式:https://www.cnblogs.com/schut/p/10461840.html
1、F1 或 Ctrl+Shift+P(俗称万能键) :打开命令面板。
2、在 Ctrl+P 模式下输入 “?” 会弹出下拉菜:
3、移动到行首: Home;移动到行尾: End
4、移动到文件结尾: Ctrl+End;移动到文件开头: Ctrl+Home
5、扩展/缩小选取范围: Shift+Alt+→ 和 Shift+Alt+←
6、返回/前进:Alt + ←/→
注意:vscode 中编辑器设置中有 用户(就是全局设置) 和 工作区(只是对当前项目进行的设置,设置文件在.vscode文件夹内)两种。
vsCode调试 nodejs 的程序:
一、简单的nodejs程序调试 很好调试,这里略过。
二、通过npm 命令 启动的程序,调试代码。
1、vue-cli2 构建的项目:https://blog.csdn.net/My__God/article/details/82015385(亲测有效)
配置 launch.json 即可:
"configurations": [ { "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "name": "启动程序", "program": "${workspaceFolder}/node_modules/webpack-dev-server/bin/webpack-dev-server.js", "args": [ "--inline", "--progress", "--config", "build/webpack.dev.conf.js" ] } ]
个人理解:npm run 命令会 到项目或全局上找cmd文件,执行基本;cmd 脚本 在去调用 node.exe 去执行相应的js文件。所以 npm命令 运行的node程序,都是要通过 node.exe 去执行 js 文件的。
那么 根据 cmd 中的配置,找到node执行的 js文件,通过 debug模式 启动这个js程序,就可以进入程序的 debug模式了。
2、