VSCode常用配置速查
有道云，腾讯云笔记，tpad，omniPlan
20.保存代码时，代码不会自动格式化，也不执行eslint代码质量检查
解决方法：
在项目下的.vscode文件夹下添加setting.json
{ "files.eol": "\n", "editor.tabSize": 2, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[vue]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "[less]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" }, "[css]": { "editor.defaultFormatter": "stylelint.vscode-stylelint" }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "css.validate": false, "less.validate": false, "scss.validate": false, "stylelint.validate": ["css", "less", "vue"], "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "cSpell.words": [ "tenone", "Weixin", "corpid", "agentid", "wxwork", "noncestr", "Miniprogram", "AGENTCONFIG", "Vant", "JSAPI", "weapp", "jssdk", "Symbian", "Cust", "WXSDK", "Pinia", "retdata", "retmsg", "Bscroll", "wechat", "vite", "vitejs", "Antd" ] }
19.vscode 扩展开发的几个api
// 设置选中 editor.selections = [new vscode.Selection(start.line, start.character, end.line,end.charactor)];
// 设置光标移动 vscode.commands.executeCommand("cursorMove",{ to: "right", value:1, by:'character', select: false, });
18. 30 个极大提高开发效率超级实用的 VSCode 插件
17. vscode插件推荐
16. vscode 扩展路径 C:\Users\{username}\.vscode\extensions下
15. vscode配置参考
{ "explorer.confirmDelete": false, "window.zoomLevel": 0, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "minapp-vscode.disableAutoConfig": true, "files.autoSave": "onFocusChange", "files.defaultLanguage": "${activeEditorLanguage}", "files.associations": { "*.vue": "vue", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "editor.codeLens": true, "editor.formatOnType": true, "editor.fontSize": 18, "editor.tabSize": 2, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "typescript.updateImportsOnFileMove.enabled": "always", "javascript.updateImportsOnFileMove.enabled": "always", "prettier.useEditorConfig": false, "prettier.printWidth": 200, // 如果你发现配置的默认格式化扩展是prettier,保存时却没有自动格式化,大概率是因为这个选项被设置成true "prettier.requireConfig": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": false, "eslint.options": { "extensions": [".js", ".vue"] }, "editor.snippetSuggestions": "top", "emmet.syntaxProfiles": { "javascript": "jsx" }, "emmet.includeLanguages": { "wxml": "html", "vue": "html", "vue-html": "html" }, "emmet.triggerExpansionOnTab": true, "emmet.showSuggestionsAsSnippets": true, "git.confirmSync": false, "git.enableSmartCommit": true, "git.autofetch": true, "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "code-runner.runInTerminal": true, "code-runner.executorMap": { "javascript": "node", "java": "cd $dir && javac $fileName && java $fileNameWithoutExt", "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "php": "php", "python": "python -u", "perl": "perl", "perl6": "perl6", "ruby": "ruby", "go": "go run", "lua": "lua", "groovy": "groovy", "powershell": "powershell -ExecutionPolicy ByPass -File", "bat": "cmd /c", "shellscript": "bash", "fsharp": "fsi", "csharp": "scriptcs", "vbscript": "cscript //Nologo", "typescript": "ts-node", "coffeescript": "coffee", "scala": "scala", "swift": "swift", "julia": "julia", "crystal": "crystal", "ocaml": "ocaml", "r": "Rscript", "applescript": "osascript", "clojure": "lein exec", "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt", "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt", "racket": "racket", "scheme": "csi -script", "ahk": "autohotkey", "autoit": "autoit3", "dart": "dart", "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt", "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt", "haskell": "runhaskell", "nim": "nim compile --verbosity:0 --hints:off --run", "lisp": "sbcl --script", "kit": "kitc --run", "v": "v run", "sass": "sass --style expanded", "scss": "scss --style expanded", "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css", "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt", "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"" }, "sync.gist": "ee5caeded7a2860bfe57ee7e6ef52a73", "sync.autoUpload": true, "terminal.integrated.profiles.windows": { // 命名中不能有空格 "GitBash": { "path": "E:\\Git\\bin\\bash.exe", "args": [], "icon": "terminal-bash" }, "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"], "args": [], "icon": "terminal-cmd" } }, "terminal.integrated.defaultProfile.windows": "GitBash", "terminal.integrated.fontSize": 16, "bracketPairColorizer.depreciation-notice": false }
14. prettier 配置参考
// 具体配置可以参考 https://prettier.io/docs/en/options.html
module.exports = {
// 1.一行代码的最大字符数，默认是80(printWidth: <int>)
printWidth: 120,
// 2.tab宽度为2空格(tabWidth: <int>)
tabWidth: 2,
// 3.是否使用tab来缩进，我们使用空格(useTabs: <bool>)
useTabs: false,
// 4.结尾是否添加分号
semi: true,
// 5.使用单引号(singleQuote: <bool>)
singleQuote: true,
// 6.object对象中key值是否加引号（quoteProps: "<as-needed|consistent|preserve>"）as-needed只有在需求要的情况下加引号，consistent是有一个需要引号就统一加，preserve是保留用户输入的引号
quoteProps: 'as-needed',
// 7.在jsx文件中的引号需要单独设置（jsxSingleQuote: <bool>）
jsxSingleQuote: false,
// 8.尾部逗号设置，es5是尾部逗号兼容es5，none就是没有尾部逗号，all是指所有可能的情况，需要node8和es2017以上的环境。（trailingComma: "<es5|none|all>"）
trailingComma: 'all',
// 9.object对象里面的key和value值和括号间的空格(bracketSpacing: <bool>)
bracketSpacing: true,
// (已过时10.jsx标签多行属性写法时，尖括号是否另起一行(jsxBracketSameLine: <bool>)
// jsxBracketSameLine: false,
// 11.箭头函数单个参数的情况是否省略括号，默认always是总是带括号（arrowParens: "<always|avoid>"）
arrowParens: 'always',
// 12.range是format执行的范围，可以选执行一个文件的一部分，默认的设置是整个文件（rangeStart: <int> rangeEnd: <int>）
rangeStart: 0,
rangeEnd: Infinity,
// 14. requirePragma: <bool>,格式化有特定开头编译指示的文件 比如下面两种
/**
* @prettier
*/
// or
/**
* @format
*/
requirePragma: false,
// 15.insertPragma: <bool> 自动插入pragma到已经完成的format的文件开头
insertPragma: false,
// 16. proseWrap: "<always|never|preserve>" 文章换行,默认情况下会对你的markdown文件换行 进行format会控制在printwidth以内
proseWrap: 'always',
// 17. htmlWhitespaceSensitivity: "<css|strict|ignore>" html中的空格敏感性
// html文档片段 1<b>2</b>3 原本显示为123, 不设置忽略空格的话格式化后会变成 1<b> 2 </b>3 显示为1 2 3
htmlWhitespaceSensitivity: 'ignore',
// 18. vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
vueIndentScriptAndStyle: false,
// 19. endOfLine: "<lf|crlf|cr|auto>" 行尾换行符,默认是lf,
endOfLine: 'lf',
// 20. 控制被引号包裹的代码是否进行格式化, 默认是auto,
embeddedLanguageFormatting: 'off'
}
// 13. 指定parser,因为pretter会自动选择,所以一般不用指定(parser: "<string>" parser: require("./my-parser"))
// "babel" (via @babel/parser) Named "babylon" until v1.16.0
// "babel-flow" (same as "babel" but enables Flow parsing explicitly to avoid ambiguity) First available in v1.16.0
// "babel-ts" (similar to "typescript" but uses Babel and its TypeScript plugin) First available in v2.0.0
// "flow" (via flow-parser)
// "typescript" (via @typescript-eslint/typescript-estree) First available in v1.4.0
// "espree" (via espree) First available in v2.2.0
// "meriyah" (via meriyah) First available in v2.2.0
// "css" (via postcss-scss and postcss-less, autodetects which to use) First available in v1.7.1
// "scss" (same parsers as "css", prefers postcss-scss) First available in v1.7.1
// "less" (same parsers as "css", prefers postcss-less) First available in v1.7.1
// "json" (via @babel/parser parseExpression) First available in v1.5.0
// "json5" (same parser as "json", but outputs as json5) First available in v1.13.0
// "json-stringify" (same parser as "json", but outputs like JSON.stringify) First available in v1.13.0
// "graphql" (via graphql/language) First available in v1.5.0
// "markdown" (via remark-parse) First available in v1.8.0
// "mdx" (via remark-parse and @mdx-js/mdx) First available in v1.15.0
// "html" (via angular-html-parser) First available in 1.15.0
// "vue" (same parser as "html", but also formats vue-specific syntax) First available in 1.10.0
// "angular" (same parser as "html", but also formats angular-specific syntax via angular-estree-parser) First available in 1.15.0
// "lwc" (same parser as "html", but also formats LWC-specific syntax for unquoted template attributes) First available in 1.17.0
// "yaml" (via yaml and yaml-unist-parser) First available in 1.14.0
// 针对不同文件或目录设置不同配置的方法,json格式例子
// {
// "semi": false,
// "overrides": [
// {
// "files": "*.test.js",
// "options": {
// "semi": true
// }
// },
// {
// "files": ["*.html", "legacy/**/*.js"],
// "options": {
// "tabWidth": 4
// }
// }
// ]
// }
13.VSCode 常用扩展
Prettier - Code formatter： 代码保存自动格式化
ESLint--代码质量检查
GitLens：查看文件变更记录。
SFTP：远程代码部署
Volar：vue代码高亮插件
json-tools：json文件有注释，末尾有逗号
bracket pair colorizer--高亮括号对应的范围
Vue VSCode Snippets--vue代码补全
12.Prettier和ESlint的区别
在格式化代码方面， Prettier 确实和 ESLint 有重叠，但它们侧重点不同：ESLint 主要工作就是检查代码质量并给出提示，它所能提供的格式化功能很有限；而 Prettier 在格式化代码方面就强大的多。
https://xiaogliu.github.io/2018/05/15/format-code-by-eslint-and-prettier/
11. package.json中有eslint,vscode中也有eslint，有什么区别？
准确的说应该是webpack中的eslint是加载器，全名是eslint-loader。是为了处理某些文件的加载器而已,因此它本质是loader。
vscode是一个编辑器，vscode中的eslint本质上是一个vscode插件，
它会调用eslint，然后将eslint的报错反馈给vscode，仅此而已。
https://www.h5w3.com/13505.html
10.settings.json设置项
VSCode 打开settings.json的路径：Ctrl+Shift+P ==>settings.json==>用户区
settings.json分为默认，用户区，工作区，优先级为工作区 ==> 用户区 ==> 默认
用户区和默认都是针对所有工作区的文件夹而言的，
工作区是针对单个项目而言的
还可以对某种语言进行配置
https://blog.csdn.net/u013304372/article/details/78917536
9.vscode自动补全功能的坑
会自动导入库，提交代码的时候，要检查一下有没有预期之外的库引用
，
8.运行js代码的插件Code-Runner的setting.json设置
"code-runner.runInTerminal": true, "code-runner.executorMap": { "html": "\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\"", "javascript": "node", }
7.SFTP配置示例
[ { "name": "sftp-mpt.zuopeng.com", "context": "sass-mp/dist", "host": "10.0.5.67", "protocol": "sftp", "port": 36000, "username": "root", "password": "yzt@1234", "remotePath": "/home/web/mpt.zuopeng.com/frontend/dist", "uploadOnSave": false, "watcher": { "files": "/Users/penghui.wang/Desktop/project/sass-mp/dist/*.{js,css}", "autoUpload": false, "autoDelete": false } } ]
6.vscode 配置同步
1)打开vscode中的首选项-设置-点击设置右上角的‘打开设置同步’
2)选择GitHub登陆-然后从github跳转回vscode-全选需要保存的设置就成功了。
3)下次在新电脑上只需用同样的方法在vscode中登陆GitHub就能自动下载之前的扩展了。
5. prettier保存自动格式代码的方法
vscode格式化失效的解决方法 https://bin.zmide.com/?p=355
1)vscode插件搜索并安装prettier并重启vscode
2)添加 vscode setting配置 如下
{
//当保存文件的时候自动格式化 "editor.formatOnSave": true, //禁止javascript的默认格式化 "javascript.format.enable": false, //使用prettier-eslint 代替 prettier "prettier.eslintIntegration": true,
}
4.vscode卸载的时候要手动删除下面的目录，才能卸载干净
C:Users/{user}/AppData/Roaming/Code
C:Users/{user}/.vscode
3.最新版vscode git-bash设置方法
"terminal.integrated.profiles.windows": { // 命名中不能有空格 "GitBash": { "path": "E:\\Git\\bin\\bash.exe", "args": [], "icon": "terminal-bash" }, "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": ["${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe"], "args": [], "icon": "terminal-cmd" } }, "terminal.integrated.defaultProfile.windows": "GitBash"
2.vscode中文菜单配置
1）打开vscode工具，安装Chinese（Simplied） Lang扩展；
2）使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；
3）修改locale.json文件下的属性“locale”为“zh-CN”;
4）重启vscode工具；
如果重启后vscode菜单等仍然是英文显示，在商店查看已安装的插件，把中文插件重新安装一遍（如下图），然后在重启工具。
在上图中商店中搜索Chinese（Simplied） Lang，安装即可。
1.vscode字体设置
文件首选项 ->字体大小设置 -> 18
参考文献
