vscode我就不多作介绍了,都9102年了,作为一个前端开发攻城狮,还不知道vscode有点过分了哈。下面直接进入主题:
Settings Sync
配置同步,一切皆可同步。多台电脑使用vscode时,可将它们的配置同步,包括代码片段,总之非常强大,装就是了。
Ayu
本人一直在用的一款主题,内涵三种颜色,当然,审美这个东西,仁者见仁,不喜欢这个也可试试排名第一的One Dark Pro。
Chinese (Simplified) Language Pack for Visual Studio Code
适用于 VS Code 的中文(简体)语言包,现在vscode将语言包独立出来了,这样就可以安装不同语言包轻松适配各种语言了。
Code Runner
看名字就知道是用来运行代码的,可以支持很多种语言,安装以后右上角有个三角形的图标,点击一下就可以运行当前编辑的文件。
ES7 React/Redux/GraphQL/React-Native snippets
其实就是一些代码片段,方便快捷输入,支持ts、tsx、js、jsx文件,之前用过JavaScript (ES6) code snippets,后来发现这个内容更多,所以换成这个了。
ESLint
这个应该不用我多说了,代码检查、自动修复,现在TS也停止TSLint而转投ESLint了,更加强大了。
GitLens — Git supercharged
强大的git插件,很多便利性的功能,用git的必装插件。
HTML CSS Support
会扫描项目中或指定的css文件,然后在你写html、vue或者其他支持的语言的时候给与提示,还有个IntelliSense for CSS class names in HTML插件,也是类似功能,装一个就可以了,不过似乎HTML CSS Support更快一点。
jQuery Code Snippets
使用jquery的同学可以安装下这个,输入jq就会出现对应的语法提示。
koroFileHeader
文件头部信息生成用的,可以自定义配置。
Live Sass Compiler
使用sass的可以试试,当然如果你的开发都是使用构建工具,那就不用安装个了。 安装好后,点击右下角
图标,就会监听sass文件,有改动会自动进行编译。Live Server
为静态和动态页面启动具有动态重新加载功能的本地开发服务器,点击右下角的
图标即可开启或关闭。minapp
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets),如果使用vscode开发小程序,那么这个插件应该是最好的。
Path Intellisense
资源路径自动补全,其实vscode已经内置了此功能,这个插件算是一个补充吧,更强大一点。
Prettier - Code formatter
非常流行的代码格式化工具,可以和eslint完没结合,类似的插件还有Beautify,安装其中一个就好。
Project Manager
可以保存多个项目,可以非常方便在多个项目间切换。
Vetur
开发vue必备,支持vue代码高亮、语法提示、格式化。
Visual Studio IntelliCode
微软爸爸官方出品的AI辅助开发工具,话说是基于 GitHub 上的数千个开源项目进行分析,给与你最适合的智能提示,感觉很强大的样子。
vscode-icons
文件(夹)图标,什么文件一目了然。
Vue 2 Snippets
基于最新的 Vue 2 的 API 代码片段。
配置
最后贴上一份vscode配置:
// 将设置放入此文件中以覆盖默认设置
{
// 编辑器
"editor.find.autoFindInSelection": true,
"editor.formatOnType": true,
"editor.lineHeight": 24,
"editor.renderWhitespace": "selection",
"editor.renderControlCharacters": false,
"editor.multiCursorModifier": "ctrlCmd",
"editor.tabSize": 2,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"editor.renderLineHighlight": "all",
"editor.showFoldingControls": "always",
"editor.smoothScrolling": true,
"editor.snippetSuggestions": "top",
"editor.wordWrap": "on",
"editor.wordWrapColumn": 100,
"editor.suggestSelection": "first",
"editor.maxTokenizationLineLength": 50000,
"workbench.startupEditor": "none",
"workbench.settings.editor": "json",
"workbench.settings.openDefaultSettings": true,
"workbench.settings.useSplitJSON": true,
"workbench.colorTheme": "Ayu Mirage Bordered",
"workbench.iconTheme": "vscode-icons",
//窗口
"window.title": "${dirty}${activeEditorShort}${separator}${activeEditorMedium}${separator}${appName}",
"window.titleBarStyle": "custom",
//文件
"files.associations": {
"*.wxml": "wxml",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.art": "vue-html",
"*.ftl": "html",
"*.pug": "jade"
},
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/panos": true
},
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true,
"**/panos/*/**": true
},
// 文件资源管理器
"explorer.autoReveal": false,
"explorer.openEditors.visible": 0,
// 搜索
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/panos": true,
"**/dist": true
},
"search.followSymlinks": false,
//PHP
"php.validate.executablePath": "D:/development/phpEnv/php/php-72/php.exe",
// css
"css.lint.duplicateProperties": "warning",
"css.lint.zeroUnits": "warning",
// less
"less.lint.duplicateProperties": "warning",
"less.lint.zeroUnits": "warning",
// scss
"scss.lint.duplicateProperties": "warning",
"scss.lint.zeroUnits": "warning",
// 扩展
"extensions.ignoreRecommendations": true,
"extensions.showRecommendationsOnlyOnDemand": true,
// 终端
"terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe",
//集成终端
// "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
// 问题预览
"problems.decorations.enabled": false,
// 导航路径
"breadcrumbs.filePath": "last",
//Emmet
"emmet.excludeLanguages": [
"markdown",
"php",
// "javascript",
// "javascriptreact",
"json",
"jsonc"
],
"emmet.includeLanguages": {
"vue": "html",
"vue-html": "html",
"wxml": "html"
},
"emmet.syntaxProfiles": {
"vue": [
"html",
"css",
"less"
],
"xml": "html"
},
"emmet.triggerExpansionOnTab": true,
//prettier
"prettier.printWidth": 100,
"prettier.semi": true,
"prettier.singleQuote": true,
// PHP interlliSense
// "php.executablePath": "D:/development/phpEnv/php/php-73/php.exe",
//code run
"code-runner.showRunCommandInEditorContextMenu": false,
"code-runner.defaultLanguage": "javascript",
// php-cs-fixer
// "php-cs-fixer.executablePath": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
// "php-cs-fixer.executablePathWindows": "D:/development/phpEnv/php/php-73/php-cs-fixer-v2.phar",
// "php-cs-fixer.onsave": true,
//fileheader
"fileheader.customMade": {
"Author": "", //你自己的名字
"Github": "", //你自己的地址
"Date":"Do not edit",
"LastEditors":"",
"LastEditTime":"Do not edit"
},
"fileheader.configObj": {
"autoAdd": false,
"prohibitAutoAdd": [
"json",
"html",
"vue"
]
},
//path-intellisense
"path-intellisense.extensionOnImport": true,
//gitlens
"gitlens.codeLens.enabled": false,
"gitlens.views.repositories.location": "scm",
"gitlens.views.lineHistory.location": "scm",
"gitlens.views.fileHistory.enabled": false,
"gitlens.views.lineHistory.enabled": false,
"gitlens.views.search.location": "scm",
"gitlens.views.compare.enabled": false,
"gitlens.menus": {
"editor": {
"blame": false,
"clipboard": false,
"compare": false,
"details": false,
"history": false,
"remote": false
},
"editorGroup": {
"blame": true,
"compare": true,
"history": true,
"remote": true
},
"editorTab": {
"compare": false,
"history": false,
"remote": false
},
"explorer": {
"compare": false,
"history": false,
"remote": false
}
},
//vutur
"vetur.validation.template": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 300,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true,
"semi": true
}
},
// git
"git.path": "D:/Program Files/Git/bin/git.exe",
"git.enableSmartCommit": true,
//同步 sync-setting
"sync.gist": "", //你自己的gist
"sync.quietSync": false,
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
"sync.forceUpload": true,
//vsicons
// liveServer
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.port": 0,
// minapp
"minapp-vscode.disableAutoConfig": true,
//css settings
"css.fileExtensions": [
"css",
"scss",
"less"
],
//ESlint
"eslint.options": {
"root":true,
// "parser": "@typescript-eslint/parser",
"plugins": [
// "prettier",
// "@typescript-eslint"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:vue/essential",
],
"rules": {
"camelcase": 1,
"curly": 0,
"brace-style": [ 0, "1tbs" ],
"quotes": [ 1, "single" ],
"semi": [ 1, "always" ],
"space-infix-ops": 1,
"no-useless-escape": 1,
"one-var": 0,
"no-extend-native": 1,
"no-unused-vars": 1,
"eqeqeq": 1,
"object-curly-spacing":[1,"always"],
"standard/object-curly-even-spacing": 0,
"func-call-spacing": 1,
"no-unneeded-ternary": 1,
"operator-assignment": 1,
"arrow-spacing": 1,
"space-before-function-paren": 0,
"no-var": 0,
"object-shorthand": 0,
"x-invalid-end-tag": 0,
"comma-dangle": 1,
"space-before-blocks": 1,
"key-spacing": 1,
"no-irregular-whitespace": 1,
"vue/valid-v-for": 0,
"prettier/prettier": [0, {
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"key-spacing": false
}],
},
"exclude": [
"/node_modules/*/**",
"/ignore_lib/*/**"
],
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2019,
"sourceType": "module",
"ecmaFeatures":{
"jsx": true
}
}
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
},{
"language": "typescriptreact",
"autoFix": true
}
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.showOutputWindow": false,
"liveSassCompile.settings.formats": [{
"format": "compressed",
"extensionName": ".css",
"savePath": "~/../css/"
}],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"not ie <= 8",
"last 2 versions"
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
"**/doc/**",
"**/bower/**",
"**/*.scss"
],
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"vsicons.dontShowNewVersionMessage": true,
"javascript.implicitProjectConfig.experimentalDecorators": true
}