规划营销型的网站结构,哈尔滨网站开发工作室,响应式商场网站,seo效果分析本来是webstrom的忠实用户#xff0c;无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码#xff0c;且破解版和激活码的文章总是很多#xff0c;但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍#xff0c;转战vscode。#xff08;注#xff1a;文中…本来是webstrom的忠实用户无奈webstrom要么需要在网上找一个破解版或者不断的去找激活码且破解版和激活码的文章总是很多但是要找到真正有效的却总是要花费不少功夫。终于忍无可忍转战vscode。注文中快捷键是windows快捷键Mac电脑快捷键将Ctrl换成command即可
一、软件下载
软件下载vscode是免费的直接去官网下载即可。 二、vscode基本设置
vscode支持选择配置也支持编辑setting.json文件修改默认配置。setting.json配置的好处是方便快捷一个团队如果都用相同的setting.json代码设置基本可以保持一致方便管理和开发。
1、vscode选择配置
Code - Preferences -Settings 2、vscode编辑setting.json文件修改默认配置
但如何打开配置代码如上图的操作Code -Preferences -Settings打开设置洁面在设置界面搜索workbench.settings.editor选中json即可改成json设置然后重新打开设置。 以下是我的个人配置仅供参考
{files.associations: {*.vue: vue,*.wpy: vue,*.wxml: html,*.wxss: css},terminal.integrated.shell.windows: C:\\Windows\\System32\\cmd.exe,git.enableSmartCommit: true,git.autofetch: true,emmet.triggerExpansionOnTab: true,emmet.showAbbreviationSuggestions: true,emmet.showExpandedAbbreviation: always,emmet.includeLanguages: {vue-html: html,vue: html,wpy: html},//主题颜色 //workbench.colorTheme: Monokai,git.confirmSync: false,explorer.confirmDelete: false,editor.fontSize: 14,window.zoomLevel: 1,editor.wordWrap: on,editor.detectIndentation: false,// 重新设定tabsizeeditor.tabSize: 2,//失去焦点后自动保存files.autoSave: onFocusChange,// 自动格式化代码editor.formatOnType: true,// #值设置为true时每次保存的时候自动格式化editor.formatOnSave: true,//每120行就显示一条线editor.rulers: [],// 在使用搜索功能时将这些文件夹/文件排除在外search.exclude: {**/node_modules: true,**/bower_components: true,**/target: true,**/logs: true,}, // #让vue中的js按prettier格式进行格式化vetur.format.defaultFormatter.html: js-beautify-html,vetur.format.defaultFormatter.js: prettier,vetur.format.defaultFormatterOptions: {js-beautify-html: {// #vue组件中html代码格式化样式wrap_attributes: force-aligned, //也可以设置为“auto”效果会不一样wrap_line_length: 200,end_with_newline: false,semi: false,singleQuote: true},prettier: {semi: false,singleQuote: true}},update.mode: none,editor.suggest.snippetsPreventQuickSuggestions: true,editor.language.brackets: [],[javascript]: {editor.defaultFormatter: esbenp.prettier-vscode},workbench.settings.editor: json}3、禁用自动更新
Code -Preferences -Settings打开设置洁面在设置界面搜索update mode并将设置更改为none。 4、开启代码提示设置
Code -Preferences -Settings打开设置洁面在设置界面搜索prevent并取消勾选 三、必备插件
在输入框中输入想要安装的插件名称点击安装即可。 1、vscode-icons
可以改变编辑器里面的文件图标 2、Chinese(Simplified)
此中文简体语言包为 VS Code 提供本地化界面。 3、Auto Rename Tag
自动修改匹配的HTML标签 4、Path Intellisense
智能路径提示可以在你输入文件路径时智能提示。 5、stylelint
CSS / SCSS / Less 语法检查 6、Import Cost
引入包大小计算 7、Prettier
代码格式化插件可以配置prettier.config.js文件,配合eslint、git hooks 一起使用提升项目代码的规范性 8、vetur
Vue语法高亮、智能感知、Emmet等 9、VueHelper
Vue,Vue-router和Vuex的代码片段 10、Vue Language Features (Volar)
v1.8.13 开发vue2的时候使用vetur 帮我们提供良好的代码智能提示 11、GitLens
详细的 Git 提交日志哪一行代码何时、何人提交都有记录。 四、vscode基本快捷键
以下快捷键中windows为Ctrlmac的快捷键将Ctrl换成Commandalt换成option 向下复制一行shift alt ↓ 向上复制一行shift alt ↑ 搜索ctrl f 替换ctrl alt f 在项目内搜索ctrl shift f 快速打开最近打开的文件CtrlP
参考文章 https://zhuanlan.zhihu.com/p/113222681
https://zhuanlan.zhihu.com/p/133414551
