ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue3+ts项目创建

2021-09-23 10:32:14  阅读:239  来源: 互联网

标签:插件 vue 格式化 创建 ts prettier vue3 安装 eslint


一,创建项目(这里使用的是vuecli)

 二,代码规范

1.集成editorconfig配置

 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格

VSCode需要安装一个插件:EditorConfig for VS Code

2,使用prettier工具 

Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。

安装,生产环境安装

 根目录下配置文件

useTabs:使用tab缩进还是空格缩进,选择false;
tabWidth:tab是空格的情况下,是几个空格,选择2个;
printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
singleQuote:使用单引号还是双引号,选择true,使用单引号;
trailingComma:在多行输入的尾逗号是否添加,设置为 `none`;
semi:语句末尾是否要加分号,默认值true,选择false表示不加; 

有些文件不需要格式化

.prettierignore忽略文件

 vscode需要安装一个插件

 这一步你可以测试是否有效

你会发现一个问题,你只能一个个文件改

在package.json中配置一个scripts:
    "prettier": "prettier --write ."

 一次性格式化多个文件

 3,使用eslint检测

 创建项目时我们选择了eslint,所以vue会默认帮我们创建eslint环境

vscode需要安装插件

当eslint报警告而你确定需要那样写,鼠标放到报警报代码上,把提示信息括号里信息复制下来

在.eslintrc.js中rules                   '复制的信息':' off'

 4,解决eslint与prettier冲突
安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装)
npm i eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件:有冲突规则的话,会将之上覆盖掉
 

 三,第三方库集成vue.config.js

持续更新

标签:插件,vue,格式化,创建,ts,prettier,vue3,安装,eslint
来源: https://blog.csdn.net/yunbabac/article/details/120365666

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有