VsCode 一些配置
1. 开启代码提示 (此步骤是后续 配置2 的前提)
我们想要再vscode中 输入 任意字母都能有代码提示
如果发现你的Vscode编译器里 输入字符没有任何字母提示 , 或者只能打出 . 这个符号才能出现一些提示 , 那么你需要这样配置
步骤
- 点击编译器左上角 文件 -> 首选项 -> 设置 -> 用户 -> 文本编辑器 -> 建议
点击再 settings.json 中编辑 这样这只这个值
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": false
}这样就可以实现任意字符提示建议了
- 如果上述方法不行的话
可能是把这个按钮打开了 , 关掉就好(同样是上边的路径)
2. 配置Vscode自定义用户模板
比如 想要Vue的模板 ， 如果没有模板我们创建.vue文件时还需要手动输入Vue的固定模板这就比较麻烦
步骤
- 点击文件->首选项->用户片段
- 可以看到有一个新建全局代码片段文件 ， 我这里已经有了全局代码文件了就不再创建,再文件里边输入你想要提示的代码前缀和模板内容即可
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// console.log()
"Print to console": {
"prefix": "consoll",
"body": [
"console.log($2);"
],
"description": "Log output to console"
},
"~~MakeGenericVueTemplate": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
"$2",
" </div>",
"</template>\n",
"<script>",
"export default {",
" components: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" created(){\n",
" },",
" watch: {\n",
" },",
" mounted(){\n",
" },",
" methods: {\n",
" },",
"}",
"</script>\n",
"<style>\n",
"</style>"
],
"description": "Vue Template"
}
}3. 关于Vscode中写Vue代码 格式化问题
- 3.1 先安装插件
Prettier - Code formatter， 直接在拓展中搜索即可 - 3.2 . 配置Vscode中 默认格式化Vue文件的插件配置
打开Vscode的setting.json 文件 配置默认格式化插件
然后就是对插件Prettier 的自定义配置了 , 刚开始用最恶心的地方就是 格式化之后 v-if稍微长一点就自动换行了 ， 现在经过我的配置之后就不会出现了
- 我个人的完整 setting.json 配置 拿走不谢
{
"editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.tabSize": 2, // 重新设定tabsize
"files.autoSave": "afterDelay",
"files.associations": {
"*.vue": "vue"
},
"git.autofetch": true,
"gitlens.advanced.messages": {
"suppressLineUncommittedWarning": true
},
"editor.snippetSuggestions": "bottom",
"git.ignoreLimitWarning": true,
"markdown.preview.lineHeight": 1.4,
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"comments": "#e9ca17"
},
// 设置侧边滚动条
"workbench.colorCustomizations": {
"editorOverviewRuler.border": "#e90c89",
"scrollbarSlider.hoverBackground": "#15ff00",
"scrollbarSlider.background": "#ffaa00"
},
// =============
// 主题侧边栏相关
"workbench.colorTheme": "Atom Material Theme",
"workbench.startupEditor": "none",
// =============
"explorer.confirmDelete": false,
"vsicons.dontShowNewVersionMessage": true,
"explorer.confirmDragAndDrop": false,
"vue-helper.alias": {
"@": "."
},
"search.followSymlinks": false,
"editor.suggestSelection": "recentlyUsedByPrefix",
"security.workspace.trust.untrustedFiles": "open",
"editor.largeFileOptimizations": false,
"terminal.integrated.fontSize": 12,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true,
"*.ts": true,
"app.js": true,
"chunk**": true
},
"search.exclude": {
"**/bower_components": true,
"**/logs": true,
"**/node_modules": true,
"**/target": true,
"*.ts": true,
"app.js": true,
"chunk**": true
},
"editor.suggest.localityBonus": true,
"editor.suggest.preview": true,
"editor.quickSuggestionsDelay": 1,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "Vue.volar"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.scrollbar.scrollByPage": true,
"editor.renderLineHighlight": "all",
"editor.guides.bracketPairs": true,
"editor.foldingMaximumRegions": 4000,
"vetur.validation.template": false,
// ============================================================
/* prettier的配置 */
"prettier.printWidth": 80, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": true, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.proseWrap": "preserve",
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.arrowParens": "avoid",
// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.bracketSpacing": true,
// 结尾是 \n \r \n\r auto
"prettier.endOfLine": "auto",
"prettier.htmlWhitespaceSensitivity": "ignore",
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.ignorePath": ".prettierignore",
// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.trailingComma": "none",
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true,
"prettier.singleAttributePerLine": true,
"prettier.bracketSameLine": true,
"prettier.useEditorConfig": false,
// ============================================================
"editor.minimap.renderCharacters": false,
"editor.minimap.showSlider": "always",
"workbench.editor.untitled.hint": "hidden",
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "IntelliJ",
"window.zoomLevel": -1,
"explorer.compactFolders": false,
"auto-rename-tag.activationOnLanguage": ["*"],
"update.showReleaseNotes": false,
"editor.fontSize": 13,
// ========================================================
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
