VS Code书写vue项目配置 eslint+prettier 统一代码风格
栏目: JavaScript · 发布时间: 6年前
内容简介:以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),但是听说用来写vue项目还不错,就开启了一番折腾。当然工具么,没有谁好谁坏了~~ 不盲目站队,适合自己的就是最好的。目标是:首先,需要安装
以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力 工具 是sublime,ws辅助,vscode基本很少使用(就下载安装放在冷宫),但是听说用来写vue项目还不错,就开启了一番折腾。当然工具么,没有谁好谁坏了~~ 不盲目站队,适合自己的就是最好的。
目标是: Eslint
校验代码语法, prettier
统一格式化代码,按下保存自动修复eslint错误,自动格式化代码(因为懒~)
安装vscode插件
首先,需要安装 Vetur
、 ESLint
、 Prettier - Code formatter
这三个插件,安装完重启下,防止插件不生效。
另外这里有个坑, Beautify
插件会占用格式化代码的快捷键,因此会和 prettier
产生冲突,所以直接禁用掉。
vscode插件配置
打开vscode工具的设置(快捷键 Ctrl
+ ,
)里面有两个设置。
一个是 USER SETTINGS(用户设置)也就是全局配置,其他项目也会应用这个配置。
另一个是WORKSPACE SETTINGS(工作区设置)也就是项目配置,会在当前项目的根路径里创建一个 .vscode/settings.json
文件,然后配置只在当前项目生效。
我把配置写在了工作区设置,配置如下:
{ //.vue文件template格式化支持,并使用js-beautify-html插件 "vetur.format.defaultFormatter.html": "js-beautify-html", //js-beautify-html格式化配置,属性强制换行 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, //根据文件后缀名定义vue文件类型 "files.associations": { "*.vue": "vue" }, //配置 ESLint 检查的文件类型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //保存时eslint自动修复错误 "eslint.autoFixOnSave": true, //保存自动格式化 "editor.formatOnSave": true } 复制代码
ESLint 和 Prettier 的冲突修复
由于需要同时使用 prettier
和 eslin
t,而 prettier
的一些规则和 eslint
的一些规则可能存在冲突,例如 prettier
字符串默认是用双引号而 esLint
定义的是单引号的话这样格式化之后就不符合 ESLint
规则了。
所以要解决冲突就需要在 Prettier
的规则配置里也配置上和 ESLint
一样的规则,直接覆盖掉, ESLint
和 Prettier
的配置文件内容如下:
.eslintrc.js
配置使用单引号、结尾不能有分号。
module.exports = { root: true, env: { node: true }, extends: ['plugin:vue/essential', 'eslint:recommended'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', //强制使用单引号 quotes: ['error', 'single'], //强制不使用分号结尾 semi: ['error', 'never'] }, parserOptions: { parser: 'babel-eslint' } } 复制代码
.prettierrc
配置使用单引号、结尾不能有分号。
{ //开启 eslint 支持 "eslintIntegration": true, //使用单引号 "singleQuote": true, //结尾不加分号 "semi": false } 复制代码
也可以直接在vscode工作区配置 prettier
{ //开启 eslint 支持 "prettier.eslintIntegration": true, //使用单引号 "prettier.singleQuote": true, //结尾不加分号 "prettier.semi": false, } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 复杂sql书写方法
- css BEM书写规范
- 书写良好的 Git 提交信息
- python turtle 书写新年快乐
- 书写可维护代码的重要性
- WPF 最小的代码使用 DynamicRenderer 书写
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Mathematica演示项目笔记
吴飞 / 清华大学出版社 / 2010-7 / 39.00元
Mathematica是由美国科学家斯蒂芬·沃尔夫勒姆(Stephen Wolfram)领导的Wolfram Research Inc.研究公司所开发的一体化计算引擎。《Mathematica演示项目笔记》结合Mathematica演示项目以及第6版和第7版的最新功能(动态交互性、即时三维图形、数值模拟和仿真、高效实时计算、集成语言系统、多核并行计算和数字图像处理等),讲解了符号计算、程序设计、算......一起来看看 《Mathematica演示项目笔记》 这本书的介绍吧!