vscodesetting.json(vscodesettingjson怎么打开)
本篇文章给大家谈谈vscodesetting.json,以及vscodesettingjson怎么打开对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)
- 2、vscode中配置@路径提示
- 3、怎么在setting.json注册
- 4、华为padvscode配置
- 5、vscode配置文件的关系
- 6、VScode使用笔记
vue VSCode 开发设置(html自动补全、eslint保存时格式化、vetur 格式化html)
File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
方法1:File - Preference - Setting -搜索setting.json - Edit in settings.json
settings.json
Setting.json
方法2:File - Preference - 搜索框输入:files.autoSave
之后能看到 files.autoSave 的可选项有
off : 关闭自动保存(默认)
afterDelay: 延迟xx时间后保存,可在 "files.autoSaveDelay" 中配置延迟时间;
onFocusChange: 编辑器失去焦点时自动保存;
onWindowChange: 窗口失去焦点时(编辑器窗口的切换,桌面窗口的切换)自动保存;
安装 ESLint
vscode 中安装 ESLint 插件
然后配置 vscode 的 setting.json
File - Preference - User Snippers
vue.json文件,然后添加下面模板
然后新建.vue文件 ,写下vue然后Tap键就能生成什么的模板。
如果没有生成模板只是多了个空格或者生成的是vue标签的话,我们还得设置一下,打开settings.json,添加下面的设置
如果你的Setting.json文逗租件有 "files.associations" 设置的话,请删除,因为他会和上面 emmet.syntaxProfiles 冲突。
files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全山带兆,如果是要用.vue模板补全功能的话,html标签补全我们就用 emmet.syntaxProfiles 来设置。
vue 的开发中 vscode 可装用于开发规范的插件有
Prettier :规范js
ESLint: 规范js
Vuter: 规范 .vue 文件中 template
stylus: 规范 stylus
注意:以下配置是基于接下来介绍的插件设置的,如果没有安装插件是不会生效的。
或者:
其中:
4.如果使用了stylus,那么vscode安装stylus插件,进行设置,不适用冒号双引号大括号
根目录下行行创建eslint规则文件 .eslintrc.js
(下面browsers 多了s 正确的为 browser )
vscode中配置@路径提示
在使用vscode开发Vue项目的过程颤孝中,经常会使用各种路茄档稿径,当你想找到src目录下蠢宴的某个文件的时候,通常会用../进行定位,通过配置@路径提示后,@/就代表是src目录下了,使用起来非常方便。
具体配置如下:
安装插件:Path Intellisense
在setting.json中添加配置(此时注意要开发哪个项目就打开哪个项目,否则很有可能不生效):
[img]怎么在setting.json注册
在settings.json中我们可以设置扩展程序的一些属性,也可以设置vscode编辑器的属性。
当我们直接则老岁在【文件-首选项-设置】中设置对应含旁的属性后,settings.json会自动更新。同样我们可以自己在settings.json中直接设置对应属性,【文件-首选项-设置】也会自动更新。
打开settings.json的方式有两种:
1.点击vscode编辑器左下角的管理图标(转轴),点击【命令面板】,然后在命令面板中输入preferences:Open Settings(JSON);
2.直接通过文件打开C:\Users\【孙睁UserName】\AppData\Roaming\Code\User\settings.json;
华为padvscode配置
华为padvscode配置
想要优雅且高效的编写代码,必须熟练使用一款前端开发工具。但前端开发工具数不胜数,像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统,独受前端工师的青睐。网上有很多vscode的配置以及使用博客,但都没有本篇那么详细且全面。
软件下载
直接在官网进行下载
Visual Studio Code - Code Editing. Redefined
最近很多人留言说官网下载被限速,如果大家存在这种情况,可以在“前端码头”后台发送vscode获取软件包。
首页
vscode设置成中文
vscode默认的语言是英文,对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。
按快捷键“Ctrl+Shift+P”。
在“vscode”顶部会出现一个搜索框。
输入“configure language”,然后回车。
“vscode”里面就会打开一个语言配置文件。
将“en-us”修改成“zh-cn”。
按“Ctrl+S”保存设置。
关闭“vscode”,再次打开就可以看到中文界面了。
当然亮扮春如果你不愿意设置,也可以直接安装它的中文插件,还是很人性化的。
VScode用户设置
1. 打开设置
文件--首选项--设置,打开用户设置。VScode支持选择配置,也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置,下面会附上我个人的配置代码
这里解析几个常用配置项:
(1)editor.fontsize用来设置字体大小,可以设置editor.fontsize : 14;
(2)files.autoSave这个属性是表示文件是否进行自动保存,推荐设置为onFocusChange——文件焦点变化时自缺升动保存。
(3)editor.tabCompletion用来在出现推荐值时,按下Tab键是否自动填敬耐入最佳推荐值,推荐设置为on;
(4)editor.codeActionsOnSave中的source.organizeImports属性,这个属性能够在保存时,自动调整 import 语句相关顺序,能够让你的 import 语句按照字母顺序进行排列,推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true };
(5)editor.lineNumbers设置代码行号,即editor.lineNumbers :true;
我的个人配置,供参考:
{ "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, // 重新设定tabsize "editor.tabSize": 2, //失去焦点后自动保存 "files.autoSave": "onFocusChange", // #值设置为true时,每次保存的时候自动格式化; "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [ ], // 在使用搜索功能时,将这些文件夹/文件排除在外 "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 这些文件将不会显示在工作空间中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中 }, "**/node_modules": 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 } } }
最近经常有人微信问我,这个配置代码写在哪里?
新版的vscode设置默认为UI的设置,而非之前的json设置。如果你想复制我上面这段代码进行配置,可以进行下面的修改
文件首选项设置 搜索workbench.settings.editor,选中json即可改成json设置;
禁用自动更新
文件 首选项 设置(macOS:代码 首选项 设置,搜索update mode并将设置更改为none。
开启代码提示设置
第一步:点击左下角点击设置图标,找到并点击“setting”
第二步:到搜索框里搜索“prevent”---并取消此项的勾选
常用的快捷键
高效的使用vscode,记住一些常用的快捷键是必不可少的,我给大家罗列了一些日常工作过程中用的多的快捷键。
以下以Windows为主,windows的 Ctrl,mac下换成Command就行了
对于 行 的操作:
重开一行:光标在行尾的话,回车即可;不在行尾,ctrl + enter 向下重开一行;ctrl+shift + enter 则是在上一行重开一行
删除一行:光标没有选择内容时,ctrl + x 剪切一行;ctrl +shift + k 直接删除一行
移动一行:alt + ↑ 向上移动一行;alt + ↓ 向下移动一行
复制一行:shift + alt + ↓ 向下复制一行;shift + alt + ↑ 向上复制一行
ctrl + z 回退
vscode配置文件的关系
简单来说,vscode是一款文本编辑器,而不是ide。这就是说,vscode只提供编辑的环境而不提供编译的环境,如果想要用vscode来集成开发环境,则必须经过以下几步:
安装必须的编译器(比如mingw,python,texlive等)
配置相应编译环境(添加环境变量等)
安装匹配的vscode的拓展插件
通过拓展插件提供的“属性”将外部编译器链接到vscode
同时,一个文本编辑器肯定不会提供运行程序的功能,vscode也是如此。要运行程序,有如下几种方法:
vscode的一些拓毁谈慧展插件中会提供配置好的终端和运行程序的命令,我们可以直接使用;
vscode中有专门运行程序的拓展插件code-runner,可以安装后使用;
vscode提供了对数种终端的接口,我们可以在vscode中像使用cmd小黑框那样使用终端,由此我们可以在vscode终端中运行程序;
这样,我们大致侍谈了解了使用vscode编译、运行程序的方法。
vscode的配置
首先,我们要明确vscode的配置的最小单元是文件夹,即可以使用打开文件夹功能我们可以把不同的文件夹链接到不同的外部编译器、实现不同的快捷任务、快速进行debug和详细设定拓展插件的功能等等。
因此,我们先速览vscode的配置结构,如下图:
可以看到,
vscode下有全局设置settings.json;之后是工作区,和工作区设置settings.json,一个工作区包含了多个文件夹;
每个文件夹中有相同的.vscode文件夹,这个文件夹中的三个文件纤答settings.json,tasks.json,launch.json,它们就是配置的核心。
每个文件夹通过配置可以编译运行不同语言的文件:c++,python和html,同时可以通过同一个工作区直接访问,这就是vscode的集成性和方便性。
VScode使用笔记
1. 设置
方法一:在UI界面设置,方法是:设置键-Settings
方法二:也可以打开setting.json文件进行设置,方法是:设置键-Command Palette,在选择框的下拉列表中选择“Preferences: Open Settings (JSON)”
2. 控制台
按Ctrl+Shift+P打开VSCode控制台,在控制台中输入命令可以实现很多功能。
3. 打开工程
在VSCode界面点击File-Open Folder,然后选择文件夹
在终端中运行code [project path]
4. 配置文件
用VSCode打开一个工程后,它会在工程中建一个.vscode文件夹,里面有三个文件
tasks.json (compiler build settings)
launch.json (debugger settings)
c_cpp_properties.json (compiler path and IntelliSense settings)
5. 环境配置
c_cpp_properties.json文件主要是设置系统级的大环境,基本上不用改,除非有第三方库
{
"configurations": [
{
"name": "Linux",
"browse": {
"path": [
"${workspaceFolder}"
],
"limitSymbolsToIncludedHeaders": true
},
"includePath": [
"${workspaceFolder}"
],
"defines": [],
"compilerPath": "/usr/bin/gcc",
"cStandard": "c11",
"cppStandard": "c++17",
漏迟碰 "intelliSenseMode": "clang-x64"
}
],
"version": 4
}
6. 编译
6.1. 自定义编译
主要通过 设置任务(动作)来实现。
tasks.json文件相当于vscode的.sh或.bat文件,用来记录一系列操作的宏。
一系列动作,那就可以用来设置 如何编译文件返谈,如何 运行文件,几乎.sh能干的都可以干。
打开控制台,输入Tasks: Configure Tasks,再选择Create tasks.json file from templates,选择Others模板,就自动生成了一个tasks.json文件,编写参数来调整设置。
{
// See
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "build1111", //你的设置文件名,可随便起
"type": "shell", //运行task的平台,一般是shell
"command": "bash ./build.sh", //普通旦渣的shell命令,运行你的.sh文件
"group": {
关于vscodesetting.json和vscodesettingjson怎么打开的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。