vscode自动格式化配置(vscode 一键格式化代码)

vscode代码自动代码格式化(添加分号)

If you are using yarn or pnpm instead of npm set the setting eslint.packageManager to either yarn or pnpm

Alternatively you can disable ESLint for the workspace folder front-basic-knowledge by executing the 'Disable ESLint' command.

[Info - 4:48:07 PM]

Failed to load the ESLint library for the document /Users/wangshihao/Desktop/github/front-basic-knowledge/jsbasic/async/shark/8.10async2.js

To use ESLint please install eslint by running npm install eslint in the workspace folder front-basic-knowledge

or globally using 'npm install -g eslint'. You need to reopen the workspace after installing eslint.

If you are using yarn or pnpm instead of npm set the setting eslint.packageManager to either yarn or pnpm

Alternatively you can disable ESLint for the workspace folder front-basic-knowledge by executing the 'Disable ESLint' command.

file - Preferences - setting ,设置默认的Formatter

华为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 配置

1.单行注释 ctrl+/ //注释

2.多行注释 alt+shift+a /**/注释

3.Alt + Click 插入光标-支持多个

4.终端打开方法

使用快捷键: ctrl + · 即可;注意那个点是键盘上 esc 下面的那 个;

或者:

选择vscode的 “查看”,然后选择“集成终端” ,打开即可;

5.左下角显示大纲(显示所有函数方法) Shift+Ctl+P - View: Quick Open View - 大纲

6.编写并实时预览Markdown 先按Ctrl + K,然后放掉,紧接着再按 v,也能调出实时预览框

1.Beautify 插件配置

在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化

VSCode格式化laravel的blade文件

2.KoroFileHeader插件配置

自动生成文件头部注释和函数注释

3.DocBlocker插件

PHP注释

361知讯网

本文链接:http://pdidw.com/vs/36013.html

发表评论

评论列表

还没有评论,快来说点什么吧~