如何轻松安装与设置VSCode:前端开发者必学指南
VSCode安装及配置
1. 下载并安装VSCode
从官网下载安装包,https://code.visualstudio.com/
本文以Windows环境为例,安装位置D:/Software/,其他全部选中默认即可。
2. 安装插件
安装完成打开VS Code,点击左边工具栏的Extensions (Ctrl+Shift+X
),在搜索框中输入插件名称,点击对应的Install进行插件安装。
2.1. 常用插件(可选)
- Chinese Language Pack for Visual Studio Code
中文(简体)
- Code Runner
万能代码运行工具
- Eclipse Keymap
Eclipse 快捷键
- GitLens
方便查看git日志,git重度使用者必备
- Material Icon Theme
vscode图标主题,支持更换不同色系的图标
- vscode-icons
VSCode图标主题
- Markdown All in One
markdown编辑,预览
- Project Manager
项目管理
- REST Client
HTTP请求工具
2.2. 前端基础插件(推荐)
- Auto Complete Tag
自动补全标签
包含Auto Close Tag
、Auto Rename Tag
- Auto Import
自动导入包
- Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用
- px to rem & rpx (cssrem)
px转换为rem
- Debugger for Chrome
映射vscode上的断点到chrome上,方便调试
- EditorConfig for VS Code
.editorconfig插件
- ESLint
js语法纠错
- HTMLHint
html代码检测
- Prettier - Code formatter
Prettier格式
- HTML CSS Support
智能提示CSS类名以及id
- HTML Snippets
智能提示HTML标签,以及标签含义
- JavaScript(ES6) code snippets
ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
- Path Autocomplete
路径智能补全,比Path Intellisense强,可以连续提示,不用按“/”
- Import Cost
显示您在VS代码编辑器中导入的程序包的大小
- CSS Peek
将鼠标悬停在元素的类名或ID上,就可以看到应用于这个元素的CSS规则
- Better Comments
代码注释高亮
2.3. React插件(可选)
- ES7 React/Redux/GraphQL/React-Native snippets
- React-Native/React/Redux snippets for es6/es7
- React/Redux/react-router Snippets
- Simple React Snippets
2.4. VUE插件(可选)
- Vetur
Vue多功能集成插件,包括:语法高亮、智能提示、emmet、错误提示、格式化、自动补全、debugger
- Vue VSCode Snippets
- VueHelper
Vue代码提示
2.5. Angular插件(可选)
- Angular 7 Snippets
Angular语法填充(标签)
- Angular Files
生成Angular的文件模板(Component、Module、Pipe等等)
- Angular Follow Selector
文件跳转(Component跳转到html、scss文件)
- Angular Language Service
引用填充和跳转到定义(html中进行引用补全)
2.6. 其他前端插件(了解)
- Beautify
格式化代码
- jQuery Code Snippets
jQuery代码智能提示
- open in browser
在浏览器中打开html
- fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
- filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
- Sass
- Sass Formatter
- Quokka.js
在代码编辑器中显示各种执行结果
- Babel JavaScript
支持ES201x,React和JSX语法高亮
- npm Intellisense
对package.json内中的依赖包的名称提示
- TabNine
是一款基于人工智能的代码自动补全工具
- Live Server
实时简易服务器,支持html/css/javascript
2.7. Java开发插件(了解)
-
Java Extension Pack
这一个Java扩展包中,就已经包含最常用的6个扩展
Language Support for Java™ by Red Hat Debugger for Java Java Test Runner Maven for Java Java Dependency Viewer Visual Studio IntelliCode
-
Lombok Annotations Support for VS Code
-
Java Code Generators
-
Spring Boot Tools
-
Spring Boot Extension Pack
3. 自定义配置
3.1. 设置eclipse快捷键
作为一个重度eclipse患者,vs code纵有千万好有些快捷键还是很想延用eclipse的快捷键。
【管理】–> 【命令面板… Ctrl + 3
】 --> 输入 Open keyboard Shortcuts
--> 打开keybindings.json
文件
// 将键绑定放在此文件中以覆盖默认值
[
{
"key": "shift+alt+r",
"command": "-revealFileInOS",
"when": "!editorFocus"
},
{
"key": "alt+/",
"command": "editor.action.triggerSuggest",
"when": "editorTextFocus"
},
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
},
{
"key": "ctrl+alt+down",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus"
},
{
"key": "ctrl+alt+up",
"command": "editor.action.copyLinesUpAction",
"when": "editorTextFocus"
},
{
"key": "shift+enter",
"command": "editor.action.insertLineAfter",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+r",
"command": "editor.action.rename",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+c",
"command": "editor.action.commentLine",
"when": "editorTextFocus"
},
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
},
{
"key": "ctrl+k",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
{
"key": "alt+shift+2",
"command": "workbench.action.splitEditor"
},
{
"key": "ctrl+shift+f",
"command": "editor.action.format",
"when": "editorTextFocus"
},
{
"key": "ctrl+k",
"command": "workbench.action.terminal.clear",
"when": "terminalFocus"
}
]
3.2. 首选项设置
文件 --> 首选项 --> 设置 --> 用户
Font Size 设置为14
Font Family 设置为 ‘Courier New’, monospace
放大:
查看 > 外观 > 放大
对应快捷键Command
+=
缩小:
查看 > 外观 > 缩小
对应快捷键Command
+-
3.3. 工作空间设置
文件 --> 首选项 --> 设置 --> 工作区 --> settings.json
{
"folders": [
{
"path": "."
}
],
"settings": {
// 默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// Vue中体验Emmet
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue", "html", "jsx"],
"files.exclude": {
"node_modules/": true
},
"liveServer.settings.multiRootWorkspaceName": "",
"liveServer.settings.port": 5500, //设置本地服务的端口号
"liveServer.settings.root": "/dist", //设置根目录,也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [".vscode/**", "**/*.scss", "**/*.sass"],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true
},
// #vetur 配置
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"singleQuote": false,
"sortAttributes": true
}
}
}
}
3.4. 用户设置(可选)
文件 --> 首选项 --> 设置 --> 用户 --> settings.json
{
"workbench.colorTheme": "KotStream Theme",
"workbench.iconTheme": "vscode-icons",
"editor.fontFamily": " 'Courier New', monospace",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
}
4. 项目配置文件
4.1. .editorconfig
文件配置
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
tab_width = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{yml,ini}]
indent_style = space
indent_size = 2
4.2. .eslintrc.js
文件配置
在项目根目录下创建
.eslintrc.js
文件,根据项目配置规则。例如:
如果违反了规则情况下,这里的数字:0表示不不处理,1表示警告,2表示错误并退出
// ESlint 检查配置
module.exports = {
extends: [require.resolve('@umijs/fabric/dist/eslint')],
globals: {
ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
page: true,
REACT_APP_ENV: true,
},
root: true,
/**
* 自定义扩展规则
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出),
* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
*/
rules: {
// 'import/no-extraneous-dependencies': 0,
// 'import/no-unresolved': 0,
// 'import/no-dynamic-require': 0,
// 'global-require': 0,
// // 'no-unused-vars': 'off',
// '@typescript-eslint/no-unused-vars': 0,
// //
// 可能的错误 //
// //
// 禁止条件表达式中出现赋值操作符
'no-cond-assign': 2,
// 禁用 console
'no-console': [1, { allow: ['warn', 'error'] }],
// 禁止在条件中使用常量表达式
'no-constant-condition': 2,
// 禁止在正则表达式中使用控制字符 :new RegExp("\x1f")
'no-control-regex': 2,
// 数组和对象键值对最后一个逗号, never参数:不能带末尾的逗号, always参数:必须带末尾的逗号,
// always-multiline:多行模式必须带逗号,单行模式不能带逗号
'comma-dangle': [1, 'always-multiline'],
// 禁用 debugger
'no-debugger': 1,
// 禁止 function 定义中出现重名参数
'no-dupe-args': 2,
// 禁止对象字面量中出现重复的 key
'no-dupe-keys': 2,
// 禁止重复的 case 标签
'no-duplicate-case': 2,
// 禁止对 catch 子句的参数重新赋值
'no-ex-assign': 2,
// 禁止不必要的分号
'no-extra-semi': 2,
// 禁止在字符串和注释之外不规则的空白
'no-irregular-whitespace': 2,
// 禁止在return、throw、continue 和 break语句之后出现不可达代码
'no-unreachable': 2,
//
// 最佳实践 //
//
// 使用 === 替代 == allow-null允许null和undefined==
eqeqeq: [2, 'allow-null'],
//
// 变量声明 //
//
// 禁止将变量初始化为 undefined
'no-undef-init': 2,
// 禁止出现未使用过的变量
'no-unused-vars': [1, { vars: 'all', args: 'none' }],
// 不允许在变量定义之前使用它们
'no-use-before-define': 0,
//
// 风格指南 //
//
// 'no-tabs': 0,
// 缩进:规则,空额数量
indent: [2, 2, { SwitchCase: 1 }],
// 不允许空格和 tab 混合缩进
'no-mixed-spaces-and-tabs': 2,
// 禁用行尾空格
'no-trailing-spaces': 2,
// 强制在花括号中使用一致的空格
'object-curly-spacing': 1,
// 要求或禁止使用分号而不是 ASI(这个才是控制行尾部分号的,)
semi: [2, 'always'],
// 强制在 function的左括号之前使用一致的空格
// 'space-before-function-paren': [
// 1,
// { anonymous: 'always', named: 'always', asyncArrow: 'always' },
// ],
// 要求或禁止模板字符串中的嵌入表达式周围空格的使用
'template-curly-spacing': 1,
},
};
4.3. .prettierrc
文件配置
在项目根目录下创建
.prettierrc
文件,根据项目配置规则。例如:
const fabric = require('@umijs/fabric');
module.exports = {
...fabric.prettier,
arrowParens: 'avoid',
bracketSpacing: true,
jsxBracketSameLine: false,
printWidth: 120,
semi: true,
singleQuote: true,
tabWidth: 2,
trailingCooma: 'all',
useTabs: false,
useWorkspaceDependencies: false,
};
4.4. tsconfig.json
文件配置
在项目根目录下创建
jsconfig.json
文件,根据项目配置规则。例如:
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "esnext",
"lib": ["esnext", "dom"],
"sourceMap": true,
"baseUrl": ".",
"jsx": "preserve",
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"allowJs": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"strict": true,
"paths": {
"@/*": ["./src/*"],
"@@/*": ["./src/.umi/*"]
}
},
"include": [
"mock/**/*",
"src/**/*",
"tests/**/*",
"test/**/*",
"__test__/**/*",
"typings/**/*",
"config/**/*",
".eslintrc.js",
".stylelintrc.js",
".prettierrc.js",
"jest.config.js",
"mock/*"
],
"exclude": ["node_modules", "build", "dist", "scripts", "src/.umi/*", "webpack", "jest"]
}
5. VSCode Debugger
5.1. 调试本地js文件
1)新建一个 js文件,如 index.js,输入以下内容:
var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);
2)运行程序
进入运行和调试视图,点击添加配置,创建lanuch.json文件, 输入以下内容:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/src/index.js",
}
]
}
注意这里的src/index.js
的文件名称要改成你自己定义的文件名称,其中的workspaceRoot 表示当前文件路径。
再按下 F5 的时候,记得配置文件一定要选择名为 Launch (和上面的name同名) 的那个配置文件运行,配置了 launch.json 文件,你还可以在 js 文件中打上断点进行调试。如下图所示
5.2. 调试HTML项目
1)环境配置:
安装Live Server
插件
File -> Preferences -> Settings, 输入 breakpoints,找到 Debug: Allow Breakpoints Everywhere,勾上允许在任何文件设置断点(这样才可以在html文件中设置断点)
2)新建一个 html 后缀的文件,如 index.html ,输入以下内容:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
console.log("hello world");
document.getElementById("demo").innerHTML="My First JavaScript Function";
alert("this is a place where can write code.");
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
右键index.html,选择Open with Live Server
打开文件,默认启动**5500
**端口
3) 运行程序
进入运行和调试视图,点击添加配置,创建lanuch.json文件, 输入以下内容:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}
然后在 script 的代码部分打上断点,按下 F5 ,点击 Try it 按钮,你可以看到中间结果了。
推荐阅读
-
如何在手机上轻松安装与设置Termux:切换源、安装基础库、基本操作指南及实战体验分享
-
如何在Ubuntu上轻松安装与设置VScode,打造C/C++(CPP)编程开发环境
-
如何在VSCode中轻松安装与设置LaTeX环境
-
如何轻松下载与安装VSCode并设置中文插件 - 超全面指南
-
如何轻松安装与设置VSCode:前端开发者必学指南
-
如何在C++环境下快速学会VSCode的安装、设置与操作指南
-
如何轻松使用JMeter进行HTTP接口测试 - 一步步教你设置线程组、 cookie、默认值与Sampler,加上响应断言和监听器,打造基础测试案例。针对复杂情况,将子系统和流程测试分类组织,确保数据一致性。同时,别忘了感谢阅读,给新手提供实战学习资源与全套测试指南,助你轻松踏上自动化测试之路! - 在"测试计划"点击右键,添加"线程组"并设定初始"线程数"和"循环次数" - 配置"HTTP Cookie管理器"与"Http请求默认值",输入目标系统信息,如域名、端口、协议等,让所有相关Sampler共享这些默认设置 - 在线程组内增加"HTTP Request"的Sampler,并填入接口详情,比如路径、请求方法及参数 - 添加"响应断言"检查接口返回结果,通过正则表达式验证预期结果 - 安装监听器,实时查看测试执行状况 - 如需处理流程性接口,请依次添加多个相关Sampler,关联前后请求间的上下文数据 特别提示:为了帮助大家避免学习中的曲折,我们准备了详尽的视频和文档资料库,无论你是软件测试的新手还是老司机,都能从中找到所需的全方位支持。只需点击下方链接加入我们的学习交流社群,就能立刻获取这份珍贵的学习宝藏!再次感谢您的耐心阅读,愿它成为您前行路上的一大助力!
-
如何轻松设置与使用Alist个人网盘:安装教程与操作指南
-
如何轻松设置与安装多店铺商城系统的环境及源码配置指南