VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。
官网为:https://code.visualstudio.com/
通用插件
Code Runner

Code Spell Checker
单词拼写检查

Settings Sync

Git History

carbon.now.sh
代码分享插件

顶部代码注释

实时调试Live

前端常用插件
Vetur

auto rename tag(自动修改标签)

Prettier - Code formatter(代码格式化)

HTML CSS Support

HTML boilerplate

Debugger for Chrome

ESLint


Vue开发设置
“文件 -> 首选项 -> 用户代码片段”
{
"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,按回车,页面结构自动生成
settings.json
{
"editor.fontFamily": "Fira Code",
"editor.fontSize": 18,
"files.autoSave": "onFocusChange",
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
}
}
网友评论