设置.vscode
settings.json
{
"eslint.validate": ["typescript"]
}
设置文件夹展开
settings——>Compact Folders
# 去掉勾
设置tabs换行显示
打开settings在搜索栏输入workbench.editor.wrapTabs 在框里打勾
win10下控制台受限
#查看控制台权限
get-ExecutionPolicy
#受限制的
Restricted
#设置成远程访问
Set-ExecutionPolicy -Scope CurrentUser
#远程签名
RemoteSigned
vscode中的快捷键
#在当前行下边插入一行
Ctrl+Enter
#块注释 Toggle Block Comment
alt + Shift + A
#单行注释
ctrl + /
#向下复制行
alt + Shift + Down
#插入多个光标
alt + 点击
#向上插入光标
ctrl + alt + Up
#向下插入光标
ctrl + alt + Down
#向下选中相同内容
ctrl + D
#向上移动行
alt + up
#自动换行
WordWrap 将off修改为on即可
#搜索transform
transform to Lowercase 转小写 atl + shift + U
transform to Uppercase 转大写 ctrl + shift + U
配置
{
"git.ignoreMissingGitWarning": true,
"editor.fontSize": 16,
"sublimeTextKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
"editor.formatOnPaste": true,
"workbench.startupEditor": "newUntitledFile",
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": false,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// #ctrl+v之后不在格式化代码
"editor.formatOnPaste":false,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.exclude": {
"**/.vscode": true,
"**/.idea": true,
"**/node_modules": true
},
"workbench.statusBar.visible": false,
// Link file types to the beautifier type
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
// Options for all default formatters
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue组件中html代码格式化样式
"wrap_attributes": "auto"
}
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "none",
// #配置缩进为2
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.showExpandedAbbreviation": "never",
"emmet.showAbbreviationSuggestions": false
"workbench.iconTheme": "vscode-icons",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//结构{}不换行
"beautify.config": {
"brace_style": "collapse,preserve-inline"
}
}
插件
vue3 插件
Vue Language Features (Volar)
Chinese (Simplified) (简体中文)
GitLens
Settings Sync #vscode同步设置插件 需要登录github 和token
#GLOBAL
#VUE
vue Extension pack #集成推荐vue相关插件
vetur #语法高亮、智能感知、Emmet等
VueHelper #vue代码提示
Vue 2 Snippets #代码片段提示
Vue peek #组件跳转
Vue-beautify #vue格式化
Vue VSCode Snippets #
HTML Snippets #H5代码片段以及提示
vscode-icon #让 vscode 资源树目录加上图标
Path Intellisense #路径自动补全
ESLint #js语法检查
JavaScript (ES6) code snippets #ES6的代码片段
JavaScript Snippet Pack #ES5及以下的代码片段
Pug(Jade)snippets #pug代码提示
HTML CSS Support #智能提示当前项目所支持的样式
jQuery Code Snippets #jquery代码片段提示
HTMLHint #html代码检测
beautify #格式化代码的工具
npm Intellisense #require 时的包提示
TSLint #TypeScript格式验证工具
Bootstrap 3 Sinnpet #Bootstrap提示
Bracket Pair Colorizer #让括号拥有独立的颜色，易于区分
Import Cost #引入包大小计算
Angular Language Service #angular的语言服务
Reactjs code snippets #reactjs语法
Prettier - Code formatter #格式化插件
Live Server #服务插件
GraphQL #GraphQL语法插件
project-tpl react前端/egg.js常用代码片段
#小程序工具插件
wechat-snippet
