国外网站建设公司,自己家的电脑宽带50m做网站服务器,建e网室内设计网官网榻榻米衣柜官方,网站手机端首页用什么软件做一. 代码规范
1.1. 集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.org root true [*] # 表示所有文件适用 charset utf-8 # 设置文件字符集为 utf-8 indent_style space # 缩进…一. 代码规范
1.1. 集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。 # http://editorconfig.org root true [*] # 表示所有文件适用 charset utf-8 # 设置文件字符集为 utf-8 indent_style space # 缩进风格tab | space indent_size 2 # 缩进大小 end_of_line lf # 控制换行类型(lf | cr | crlf) trim_trailing_whitespace true # 去除行尾的任意空白字符 insert_final_newline true # 始终在文件末尾插入一个新行 [*.md] # 表示仅 md 文件适用以下规则 max_line_length off trim_trailing_whitespace false VSCode需要安装一个插件EditorConfig for VS Code 1.2. 使用prettier工具
Prettier 是一款强大的代码格式化工具支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言基本上前端能用到的文件格式它都可以搞定是当下最流行的代码格式化工具。
1.安装prettier npm install prettier -D 2.配置.prettierrc文件
useTabs使用tab缩进还是空格缩进选择falsetabWidthtab是空格的情况下是几个空格选择2个printWidth当行字符的长度推荐80也有人喜欢100或者120singleQuote使用单引号还是双引号选择true使用单引号trailingComma在多行输入的尾逗号是否添加设置为 none比如对象类型的最后一个属性后面是否加一个semi语句末尾是否要加分号默认值true选择false表示不加
{useTabs: false,tabWidth: 2,printWidth: 80,singleQuote: true,trailingComma: none,semi: false
}
3.创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*
4.VSCode需要安装prettier的插件 5.VSCode中的配置
settingg format on save 勾选上settings editor default format 选择 Prettier - Code formatter6.测试prettier是否生效
测试一在代码中保存代码测试二配置一次性修改的命令
在package.json中配置一个scripts
prettier: prettier --write . 1.3. 使用ESLint检测
1.在前面创建项目的时候我们就选择了ESLint所以Vue会默认帮助我们配置需要的ESLint环境。
2.VSCode需要安装ESLint插件 3.解决eslint和prettier冲突的问题
安装插件vue在创建项目时如果选择prettier那么这两个插件会自动安装 npm install eslint-plugin-prettier eslint-config-prettier -D 添加prettier插件
extends: [plugin:vue/vue3-essential,eslint:recommended,vue/typescript/recommended,vue/prettier,vue/prettier/typescript-eslint,plugin:prettier/recommended
],
4.VSCode中eslint的配置
CtrlP setting.json
eslint.lintTask.enable: true,
eslint.alwaysShowStatus: true,
eslint.validate: [javascript,javascriptreact,typescript,typescriptreact
],
editor.codeActionsOnSave: {source.fixAll.eslint: true
},
