VSCode（Visual Studio Code）是由微軟研發(fā)的一款免費(fèi)调缨、開(kāi)源的跨平臺(tái)文本（代碼）編輯器楚堤，算是目前前端開(kāi)發(fā)幾乎完美的軟件開(kāi)發(fā)工具筛谚。
官網(wǎng)為：https://code.visualstudio.com/
通用插件
Code Runner
圖片.png
Code Spell Checker
單詞拼寫(xiě)檢查
圖片.png
Settings Sync
圖片.png
Git History
圖片.png
carbon.now.sh
代碼分享插件
圖片.png
頂部代碼注釋
圖片.png
實(shí)時(shí)調(diào)試Live
圖片.png
前端常用插件
Vetur
圖片.png
auto rename tag（自動(dòng)修改標(biāo)簽）
圖片.png
Prettier - Code formatter（代碼格式化）
圖片.png
HTML CSS Support
圖片.png
HTML boilerplate
圖片.png
Debugger for Chrome
圖片.png
ESLint
圖片.png
image.png
Vue開(kāi)發(fā)設(shè)置
“文件 -> 首選項(xiàng) -> 用戶代碼片段”
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" name: '',",
" data () {",
" return {",
" ",
" };",
" },",
" methods: {}",
"}",
"</script>",
"",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}
}
新建.vue文件爱咬，輸入vue际邻，按回車，頁(yè)面結(jié)構(gòu)自動(dòng)生成
settings.json
{
"editor.fontFamily": "Fira Code",
"editor.fontSize": 18,
"files.autoSave": "onFocusChange",
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": true,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": false,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue組件中html代碼格式化樣式
}
}
}
