VSCode安装及配置（前端开发必备）
VSCode安装及配置
1. 下载并安装VSCode
从官网下载安装包，https://code.visualstudio.com/
本文以Windows环境为例，安装位置D:/Software/，其他全部选中默认即可。
2. 安装插件
安装完成打开VS Code，点击左边工具栏的Extensions (Ctrl+Shift+X)，在搜索框中输入插件名称，点击对应的Install进行插件安装。
1).常用插件(可选)
- Chinese Language Pack for Visual Studio Code
中文（简体） - Code Runner
万能代码运行工具 - Eclipse Keymap
Eclipse 快捷键 - GitLens
方便查看git日志，git重度使用者必备 - KotStream Theme
VSCode主题 - Material Icon Theme
vscode图标主题，支持更换不同色系的图标 - vscode-icons
VSCode图标主题 - Markdown Preview Enhanced
实时预览markdown - markdownlint
markdown语法纠错 - Project Manager
项目管理
2).前端基础插件(推荐)
- Auto Close Tag
自动闭合HTML/XML标签 - Auto Rename Tag
自动完成另一侧标签的同步修改 - Bracket Pair Colorizer
让括号拥有独立的颜色，易于区分。可以配合任意主题使用 - cssrem
px转换为rem - Debugger for Chrome
映射vscode上的断点到chrome上，方便调试 - HTML CSS Support
智能提示CSS类名以及id - HTML Snippets
智能提示HTML标签，以及标签含义 - JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间 - Live Server
实时简易服务器,支持html/css/javascript - Path Autocomplete
路径智能补全，比Path Intellisense强，可以连续提示，不用按“/” - Import Cost
显示您在VS代码编辑器中导入的程序包的大小
3).前端格式化插件（必选）
- EditorConfig for VS Code
.editorconfig插件 - ESLint
js语法纠错 - HTMLHint
html代码检测 - Prettier - Code formatter
Prettier格式
4).React插件（可选）
- React/Redux/react-router Snippets
React/Redux/react-router语法智能提示 - Reactjs code snippets
react开发的一些简写 - React Native Snippet
- React Redux ES6 Snippets
- React-Native/React/Redux snippets for es6/es7
- Typescript React code snippets
这是tsx的react组件片段
5).VUE插件（可选）
- Vetur
Vue多功能集成插件，包括：语法高亮、智能提示、emmet、错误提示、格式化、自动补全、debugger - VueHelper
Vue代码提示
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内中的依赖包的名称提示
5).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. 自定义配置
1).设置eclipse快捷键
作为一个重度eclipse患者，vs code纵有千万好有些快捷键还是很想延用eclipse的快捷键。
【管理】–> 【命令面板… Ctrl + 3】 --> 输入 Open keyboard Shortcuts --> 打开keybindings.json文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuqEl3Hi-1585215342407)(VSCode安装及配置.assets/clipboard-1585118287040.png)]
// 将键绑定放在此文件中以覆盖默认值
[
{
"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"
}
]
2).首选项设置
文件 --> 首选项 --> 设置 --> 用户
Font Size 设置为14
Font Family 设置为 ‘Courier New’, monospace
放大：
查看 > 外观 > 放大对应快捷键Command+=缩小：
查看 > 外观 > 缩小对应快捷键Command+-
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"],
"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
}
}
}
}
4).用户设置(可选)
文件 --> 首选项 --> 设置 --> 用户 --> settings.json
{
"workbench.colorTheme": "KotStream Theme",
"workbench.iconTheme": "vscode-icons",
"editor.fontFamily": " 'Courier New', monospace",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
}
4.项目配置文件
1)..editorconfig文件配置
# 告诉EditorConfig插件，这是根文件，不用继续往上查找
root = true
# 匹配全部文件
[*]
# 设置字符集
charset = utf-8
# 缩进风格，可选space、tab
indent_style = space
# 缩进的空格数
indent_size = 2
# 结尾换行符，可选lf、cr、crlf
end_of_line = lf
# 在文件结尾插入新行
insert_final_newline = true
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 匹配md结尾的文件
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
[*.java]
indent_style = tab
2)..eslintrc.js文件配置
在项目根目录下创建
.eslintrc.js文件，根据项目配置规则。例如：
如果违反了规则情况下，这里的数字：0表示不不处理，1表示警告，2表示错误并退出
// ESlint 检查配置
{
"root": true,
// 环境定义了预定义的全局变量。
"env": {
// 环境定义了预定义的全局变量。更多在官网查看
"browser": true,
"node": true,
"commonjs": true,
"amd": true,
"es6": true,
"mocha": true
},
// JavaScript 语言选项
"parserOptions": {
// ECMAScript 版本
"ecmaVersion": 6,
"parser": "babel-eslint",
"sourceType": "module", // script
// 想使用的额外的语言特性:
"ecmaFeatures": {
// 允许在全局作用域下使用 return 语句
"globalReturn": true,
// impliedStric
"impliedStrict": true,
// 启用 JSX
"jsx": true
}
},
"extends": ["plugin:vue/essential", "@vue/standard"],
// plugins: ['prettier'],
/**
* "off" 或 0 - 关闭规则
* "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出),
* "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
*/
"rules": {
// //////////////
// 可能的错误 //
// //////////////
// 禁止条件表达式中出现赋值操作符
"no-cond-assign": 2,
// 禁用 console
"no-console": [1, { "allow": ["warn", "error", "log"] }],
// 禁止在条件中使用常量表达式
"no-constant-condition": 2,
// 禁止在正则表达式中使用控制字符 ：new RegExp("\x1f")
"no-control-regex": 2,
// 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号，
// always-multiline：多行模式必须带逗号，单行模式不能带逗号
"comma-dangle": [1, "always-multiline"],
// 禁用 debugger
"no-debugger": 2,
// 禁止 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": 0,
// 要求或禁止使用分号而不是 ASI（这个才是控制行尾部分号的，）
"semi": [2, "always"],
// 强制在 function的左括号之前使用一致的空格
"space-before-function-paren": [0, "never"],
// 要求或禁止模板字符串中的嵌入表达式周围空格的使用
"template-curly-spacing": 1
}
}
3)..prettierrc文件配置
在项目根目录下创建
.prettierrc文件，根据项目配置规则。例如：
{
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
"arrowParens": "avoid",
// 对象中的空格 默认true
// true: { foo: bar }
// false: {foo: bar}
"bracketSpacing": true,
// JSX标签闭合位置 默认false
// false:
// className=""
// style={{}}
// >
// true:
// className=""
// style={{}} >
"jsxBracketSameLine": false,
// 每行最大字符数
"printWidth": 120,
// 使用分号, 默认true
"semi": true,
// 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"singleQuote": true,
// tab缩进大小,默认为2
"tabWidth": 2,
// 行尾逗号,默认none,可选 none|es5|all
// es5 包括es5中的数组、对象
// all 包括函数对象等所有可选
"trailingComma": "es5",
// 使用tab缩进，默认false
"useTabs": false,
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
4).jsconfig.json文件配置
在项目根目录下创建
jsconfig.json文件，根据项目配置规则。例如：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "es2017",
"allowSyntheticDefaultImports": false
},
"include": ["src/**/*", "mock"],
"exclude": ["node_modules", "dist"]
}