vs code 打造舒适的vue开发环境

使用开发工具：VS Code或Sublime Text #生活知识# #编程教程#

主要从两个技巧说明

代码格式化自动生成代码块

以vue-cli创建的项目为例，项目结构如下

1 代码格式化

1.1 eslint修改

vue推荐使用eslint standard风格的代码，根据个人喜好对eslint做一些修改，打开项目根目录中的.eslintrc.js文件，在rules中添加"space-before-function-paren": ["error", "never"]，目的是为了让eslint检查在函数名和括号之间不能有空格，如图：

1.2 安装vs code扩展工具

共用到三个扩展工具vetur、Prettier - Code formatter和ESLint，如图：

点击安装这三个工具，并重新加载。

1.3 vs code用户设置

打开设置界面：vs code文件–>首选项–>设置，如图：

在打开的窗口中的“用户设置”中加入下面内容：

{ // prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大 "prettier.printWidth": 120, // prettier:是否在每行末尾加上分号 "prettier.semi": false, // prettier:如果为true，将使用单行否则使用双引号 "prettier.singleQuote": true, // vetur:对html的内容使用js-beautify-html "vetur.format.defaultFormatter.html": "js-beautify-html" }12345678910

如图：

1.4 试一试

打开src/components/HelloWorld.vue文件试一试，按下Alt+Shift+F，代码工工整整的格式化了，从此所有的文件都可以Alt+Shift+F一键格式化了，严格来说是三键格式化。

2 自动生成代码块

使用vs code - snippet生成代码块。以生成一个vue组件的基本内容为例。

2.1 打开snippet - vue

在vs code中，使用快捷键Ctrl+Shift+P打开搜索栏–>输入snippet–>选择首选项，如图：

打开了snippet搜索栏–>输入vue–>选择vue.json，如图

2.2 输入需要生成的vue组件内容

在打开的vue.json中输入下面内容：

{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " </div>", "</template>\n", "<script>", "export default {", " data() {", " return {\n", " }", " },", " methods: {\n", " },", " components: {\n", " }", "}", "</script>\n", "<style>\n", "</style>", "$2" ], "description": "创建一个自定义的vue组件代码块" } }

12345678910111213141516171819202122232425262728

如图：

2.3 试一试

准备完毕，现在来试一下，在src/components/中创建Test.vue文件，输入vue，然后按回车键，如图：

接下来就可以看到一段完整的vue组件代码被生成了，如图：

可根据自己的需求来定制vue，当然也可以创建其它的代码块。

作者：郎福涛
日期：2018年6月3日
操作系统：windows7
相关软件：
Visual Studio Code 1.23.1
nodejs v8.9.4
npm 6.1.0
vue 2.9.5
vue-cli 2.9.3
eslint 4.15.0
Prettier - Code formatter 1.12.0（Visual Studio Code扩展工具)
ESLint 1.4.10（Visual Studio Code扩展工具)
Vetur 0.12.3（Visual Studio Code扩展工具)

网址：vs code 打造舒适的vue开发环境 https://www.yuejiaxmz.com/news/view/526287

相关内容

最香远程开发解决方案！手把手教你配置VS Code远程开发工具，工作效率提升N倍
VS Code安装更新失败解决方案
Node+Vue毕设校园二手书籍交易的系统（程序+mysql+Express）
Node+Vue毕设校园旧物交易系统（程序+mysql+Express）
如何在Linux系统上进行开发环境的配置和优化
如何打造舒适的居住环境？打造舒适环境有哪些关键因素？
如何营造温馨的小卧室环境？这种环境如何提升居住舒适度？
“import ... =“ 只能在typescript 文件中使用（解决方法）
打造舒适宜人的家居环境
打造安静舒适的家居环境

随便看看