1.为什么
主要是为了一个项目在每个人的电脑中都能使用同一个配置,这样大家在vscode中进行编辑代码的时候,能保持格式的一致,大家使用的格式化文件的插件等配置也能保持一致,所以增加的
2.怎么进行配置
在项目中增加.vscode/setting.json即可,考虑到首次,请强制添加文件git add -f .vscode/setting.json到git的追踪中
3.优先级
项目中的.vscode/setting.json>用户配置的setting
4.需要安装的vscode插件
- prettier(必须)
- vetur(必须)
- eslint(必须)
- editorconfig for vscode(可不安装)
- path intellisense(路径跳转相关)
5.配置项相关
.vscode/setting.json
{
“editor.tabSize”: 2,
// 在保存时格式化文件
“editor.formatOnSave”: false,
// 控制编辑器是否自动格式化粘贴的内容
“editor.formatOnPaste”: false,
// 双击选中单词,短横线不进行分隔
“editor.wordSeparators”: “`~!@#$%^&*()=+[{]};:'”,.<>/?",
// 格式化的 tabSize的大小
“vetur.format.options.tabSize”: 2,
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
// 这里也可以使用 “editor.defaultFormatter”: “esbenp.prettier-vscode”,但是要保证安装了prettier插件
// 这样使用快捷键格式化 command + k \ command + f,可以进行选择部分代码进行格式化 windows 无效
},
“[html]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[json]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
// 设置vue的格式化为vetur,请安装vetur插件以及prettier插件
“[vue]”: {
“editor.defaultFormatter”: “octref.vetur”
},
// 强制所有的文件的换行使用\n,因为linux mac 默认为\n,window中的默认为\r\n
“files.eol”: “\n”,
}
这里我们设定了一些配置项,并且设置了一些文件使用的默认格式化文件都是prettier插件,vue使用vetur插件,保证了大家的进行格式化都是使用同一个文件
6…editorconig
此文件主要是大家在不同的编辑器中也能采用同一个配置项,比如在 webstom ,github ,gitlab, intellijidea 等,部分的编辑器需要安装插件 比如 vscode,atom需要,此配置项我们保持与 vue官方的一致,其配置如下
editorconfig.org
vscode need install editorconfi for vscode plugin
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
7…gitattributes文件
此文件主要是在部分钩子进行文件变更的情况或者是git进行download文件的时候会对文件进行格式化,但是会跟我们的prettier 的换行符配置冲突,所以增加此文件
这里只进行换行符的配置
- text=auto eol=lf
此外这里放置了 chrome开发团队的配置项
Stop Windows python license check presubmit errors by forcing LF checkout.
*.py text eol=lf
Force LF checkout of the pins files to avoid transport_security_state_generator errors.
/net/http/*.pins text eol=lf
Force LF checkout for all source files
*.bin binary
*.c text eol=lf
*.cc text eol=lf
*.cpp text eol=lf
*.csv text eol=lf
*.grd text eol=lf
*.grdp text eol=lf
*.gn text eol=lf
*.gni text eol=lf
*.h text eol=lf
*.html text eol=lf
*.idl text eol=lf
*.in text eol=lf
*.inc text eol=lf
*.java text eol=lf
*.js text eol=lf
*.json text eol=lf
*.json5 text eol=lf
*.md text eol=lf
*.mm text eol=lf
*.mojom text eol=lf
*.pdf -diff
*.proto text eol=lf
*.rs text eol=lf
*.sh text eol=lf
*.sql text eol=lf
*.toml text eol=lf
*.txt text eol=lf
.xml text eol=lf
.xslt text eol=lf
.clang-format text eol=lf
.eslintrc.js text eol=lf
.git-blame-ignore-revs text eol=lf
.gitattributes text eol=lf
.gitignore text eol=lf
.vpython text eol=lf
codereview.settings text eol=lf
DEPS text eol=lf
ATL_OWNERS text eol=lf
LICENSE text eol=lf
LICENSE. text eol=lf
MAJOR_BRANCH_DATE text eol=lf
OWNERS text eol=lf
README text eol=lf
README. text eol=lf
WATCHLISTS text eol=lf
VERSION text eol=lf
DIR_METADATA text eol=lf
Skip Tricium by default on files in third_party.
third_party/** -tricium
8.jsconfig的配置
此插件主要是在我们项目中设置了别名导致vscode无法进行文件的定位,比如我们在vue.config.js中设置了以下别名
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘./src’),
},
},
},
})
然后我们就可以在js|vue文件中这样去引用文件
import HelloPug from ‘@/components/HelloPug.vue’
但是这样的文件我们无法通过ctrl+鼠标进行文件的定位和跳转
[图片]
vscode会出现这样的弹窗,但是无法跳转,此时我们就可以通过配置jsconfig.json中的的paths增加配置项即可
{
“compilerOptions”: {
//指定要使用的默认库 lib.d.ts,可选 es3 / es5 / es6 / es2015 / es2016 / es2017 / es2018 / es2019 / es2020 / esnext
“target”: “es5”,
// 指定模块系统(生成模块代码时),可选 amd / commonJS / es2015 / es6 / esnext / none / system / umd
“module”: “esnext”,
// 基本目录,用于解析非相对模块名称
“baseUrl”: “./”,
// 指定如何解析模块以进行导入,可选 node / classic
“moduleResolution”: “node”,
// // 指定要相对于 baseUrl 选项计算的路径映射
“paths”: {
“@/": [
"src/”
],
“@views/":["src/views/”]
},
“lib”: [
“esnext”,
“dom”,
“dom.iterable”,
“scripthost”
]
},
// 降低智能感应的时间
“exclude”:[“node_modules”,“dist”]
}
这样能处理导入的.vue文件,如果省略vue文件的后缀名,则无法正常跳转
9…prettierrc 文件
在进行代码格式化的时候,我们默认在vscode中使用prettier进行格式化,prettier的默认格式的规则与我们想要的规则不太一样,所以这里进行部分规则的重写,这样出来的结果跟符合我们的习惯或者目前前端的趋势
此文件主要是配置prettier格式化的规范,有两点
1.prettier插件会进行读取文件配置规则
2.在hook中可以通过 prettier --write进行文件的格式化此时也会进行读取配置文件
3.直接执行prettier --write也可以进行指定或者所有文件的格式化
9.1 文件优先级
目录的.prettierrc>父级目录的prettierrc > .vscode.setting.json prettier相关规则配置 > 默认配置
9.2 文件支持的类型
1.prettier key in package.json
2…prettierrc in json or yaml
3…prettierc.json| yml yaml json5
4…prettierrc.js cjs prettier.config.js cjs 使用module.export导出
5.prettierrc.toml
9.3格式化快捷键
window中可以使用shif+alt+f进行文件的快速全部格式化,也可选中部分的代码通过ctrl+k 然后ctrl+f 进行部分代码格式化
9.4配置项相关
目前我们使用的是.prettierrc 文件 文件内部使用json格式
{
“htmlWhitespaceSensitivity”: “ignore”,
“printWidth”: 120,
“semi”: false,
“singleQuote”: true,
“vueIndentScriptAndStyle”: false
}
部分常用带注释的配置项如下
{
// plugins:[require.resolve(‘@prettier/plugin-pug’)],
//html文件的空格敏感度 解决prettier格式化html文件的问题
“htmlWhitespaceSensitivity”: “ignore”,
// 每行最大的长度 会与html的属性强制换行冲突
“printWidth”: 120,
// tab 键的宽度
// tabWidth: 2,
// 不使用tab
// useTabs: false,
// 结尾加上分号
// todo 自执行函数闭包开头加分号
“semi”: false,
// 使用单引号
“singleQuote”: true,
// 确保对象的最后一个属性后有逗号,方便后续增加新属性
// trailingComma: ‘es5’,
// 箭头函数,单个参数添加括号 always (x) => , avoid x=>x
// arrowParens: ‘always’, default
// 是否严格按照文件顶部的特殊注释格式化代码
// requirePragma: false,
// 是否在格式化的文件顶部插入Pragma标记,以表明该文件被prettier格式化过了
// insertPragma: false,
// 结尾是 \n \r \n\r auto
// endOfLine: ‘lf’, default lf
// object对象中key值是否加引号(quoteProps: “<as-needed|consistent|preserve>”)as-needed只有在需求要的情况下加引号,consistent是有一个需要引号就统一加,preserve是保留用户输入的引号
// quoteProps: ‘as-needed’, default as-needed
//object对象里面的key和value值和括号间的空格(bracketSpacing: ) 这个根据情况吧,取消eslint的提示
// bracketSpacing: true,
//vue script和style标签中是否缩进,开启可能会破坏编辑器的代码折叠
“vueIndentScriptAndStyle”: false,
// 决定 > 再jsx html 中是否换行展示
// bracketSameLine: false, default false
// 多行文本是否强制折行展示
// proseWrap: ‘always’, default preserve
}
10…eslintrc文件
此文件需要配合eslint插件进行使用
eslint主要是我们在使用vscode书写代码的时候可以实时的识别当前文件的代码规范
.eslintrc文件主要是进行eslint的规范的规则的配置
1.支持的文件
- .eslintrc.js > cjs > yaml >yml > json > package.json
- package。json中 增加 eslintConfig属性
我们项目中推荐使用.eslintrc.js文件
2.相关配置
目前的配置项如下
// 需要安装的插件
// eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-config-airbnb
// eslint-plugin-vue-pug-sfc
// eslint-plugin-import eslint-import-resolver-alias
module.exports = {
root: true,
env: {
node: true,
browser: true,
// es5: false,
// es2015: false,
// es2016: false,
es2017: true,
},
// 全局作用域的配置
globals: {
$: ‘readonly’,
},
// 处理别名问题,否则在使用别名的时候会进行报错
settings: {
‘import/resolver’: {
alias: {
map: [[‘@’, ‘./src’]],
},
},
},
// 需要安装eslint-config-prettier eslint-plugin-prettier
// 注意 使用prettier与eslint冲突 必须吧plugin:prettier/recommended放到最后
// essential:基础的版本
// strongly-recommended 强烈推荐版本 提升代码可读性, 开发体验
// recommended 推荐版本
// https://github.com/vuejs/eslint-plugin-vue/issues/640
extends: [
‘airbnb’,
‘plugin:vue/strongly-recommended’,
// plugin 无效
‘plugin:vue-pug/recommended’,
// 代码变动会导致无法检测出来问题vue中的问题
// ‘plugin:vue-pug-sfc/recommended’,
‘plugin:prettier/recommended’,
],
plugins: [‘pug’],
rules: {
// 修改环境的问题需要配合env或者globals进行使用
‘no-undef’: ‘error’,
// 不能对参数进行赋值 比如下面这样
// const arrMap = arr.reduce((prev, cur, index) => {
// prev[cur] = index
// return prev
// }, {})
‘no-param-reassign’: ‘off’,
// 不允许使用++
‘no-plusplus’: ‘off’,
// 一个文件可以允许多个class类
‘max-classes-per-file’: ‘off’,
// class内部的方法 必须使用this
‘class-methods-use-this’: ‘off’,
// todo 多余的boolean转换 !!!foo
‘no-extra-boolean-cast’: ‘off’,
// 强制使用 相等
eqeqeq: ‘off’,
‘prettier/prettier’: [
‘error’,
{}
// {
// // prettierrc文件的类型
// fileInfoOptions: {
// withNodeModules: true,
// },
// },
],
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘warn’,
// 没有使用的字符不提示报错
‘no-unused-vars’: ‘warn’,
// 建议使用const 所以这里暂时只设置警告
‘prefer-const’: ‘warn’,
// 最多多少属性在一行内,与prettier有冲突
‘vue/max-attributes-per-line’: ‘off’,
// 组件的在template中的名称规则 只能使用my-components的方式
‘vue/component-name-in-template-casing’: [
‘error’,
‘kebab-case’,
{
registeredComponentsOnly: false,
},
],
‘prefer-rest-params’: ‘warn’,
// 单行或者多行html是否内容强制要求换行,这部分交给prettier来控制 超出120字符自动换行
‘vue/singleline-html-element-content-newline’: ‘off’,
‘vue/multiline-html-element-content-newline’: ‘off’,
// 是否允许再v-for 里使用v-if 强制 补充规范内
‘vue/no-use-v-if-with-v-for’: [‘error’],
},
}
3.属性解释
1.env
表示eslint支持的环境,在使用相关环境的代码的时候不会进行报错,
比如如果未配置browser的环境在使用window的时候会进行报错,未配置jQuery的环境 使用$符号的时候会进行报错
支持的环境列表如下
- browser - browser global variables.
- node - Node.js global variables and Node.js scoping.
- commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
- shared-node-browser - Globals common to both Node.js and Browser.
- es6 - enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6).
- es2016 - adds all ECMAScript 2016 globals and automatically sets the ecmaVersion parser option to 7.
- es2017 - adds all ECMAScript 2017 globals and automatically sets the ecmaVersion parser option to 8.
- es2018 - adds all ECMAScript 2018 globals and automatically sets the ecmaVersion parser option to 9.
- es2019 - adds all ECMAScript 2019 globals and automatically sets the ecmaVersion parser option to 10.
- es2020 - adds all ECMAScript 2020 globals and automatically sets the ecmaVersion parser option to 11.
- es2021 - adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
- es2022 - adds all ECMAScript 2022 globals and automatically sets the ecmaVersion parser option to 13.
- worker - web workers global variables.
- amd - defines require() and define() as global variables as per the amd spec.
- mocha - adds all of the Mocha testing global variables.
- jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
- jest - Jest global variables.
- phantomjs - PhantomJS global variables.
- protractor - Protractor global variables.
- qunit - QUnit global variables.
- jquery - jQuery global variables.
- prototypejs - Prototype.js global variables.
- shelljs - ShellJS global variables.
- meteor - Meteor global variables.
- mongo - MongoDB global variables.
- applescript - AppleScript global variables.
- nashorn - Java 8 Nashorn global variables.
- serviceworker - Service Worker global variables.
- atomtest - Atom test helper globals.
- embertest - Ember test helper globals.
- webextensions - WebExtensions globals.
- greasemonkey - GreaseMonkey globals.
2.globals
在使用部分全局变量的时候,如果是在env环境中不支持 globals中未配置的全局变量 也会引起eslint的报错(报错原因是’no-undef’ 导致的)
3.settings
主要是为了我们在jsconfig中设置的路径别名,eslint无法识别而导致的报错
4.extends
这里主要是eslint使用了哪些扩展
- airbnb 我们使用了 airbnb的基础规范
- plugin:vue/strongly-recommended eslint-vue中强烈推荐的规范项目
- plugin:prettier/recommended
- 配合prettier进行使用,
- 修改了prettier中跟eslint规则冲突的地方
- eslint的报错会标识是prettier的格式问题
- 需要在rules中进行配置才会进行报错,
- 会读取项目中的prettierrc的配置,如果是js文件需要设置withNodeModules为true
‘prettier/prettier’: [
‘error’,
{}
// {
// // prettierrc文件的类型
// fileInfoOptions: {
// withNodeModules: true,
// },
// },
]
5.extends 与 plugin的区别
plugin为eslint新增一些规则 比如 eslint-plugin-vue esling-plugin-react 等,但是使用rule还是要在rules中写入规则
extends 相当于plugin 与 rules 的结合体
6.rules
eslint的相关规则的配置
重写了部分规则,更符合我们写代码的习惯或者是目前的趋势
11.git hooks相关
需要安装的包 lint-staged,chalk ^4.1.2
在进行git 相关命令的时候,增加钩子校验变更的文件或者提交的commit信息等
我们主要用pre-commit 进行校验文件的格式是否符合eslint规则
在commit-msg 中对提交的信息进行校验
1.方案
目前社区中流行两种方案
- git原生hooks vue2 pinia
- husky – vuetify,angular, ant-design 有点简化部分githook的操作
- Yorkie fork自husky 做了一些变更(社区中用的非常少)
- Simple-git-hook(之前是simple-pre-commit) ---- vue/core
2.采用方案
因为我们只需要做两点 - commit之前对提交的文件进行格式校验
- commit的时候对commit的信息进行校验
所以我们直接用git的原生hooks即可
3.使用方式
需要安装lint-staged npm包,这个主要是在比对的时候只比对当前提交的文件,未进行修改的文件不会进行修改
安装chalk包主要是在commit-msg中读取用户输入的文字,版本限定为^4.1.2, 5版本采用了esmodule的方式,不太符合目前公司项目中的node的版本(目前公司的项目都是使用14版本进行开发)
需要在package.json文件中增加下面代码: 主要是 giHooks字段配置执行的命令
“gitHooks”: {
“pre-commit”: “lint-staged”,
“commit-msg”: “node scripts/verify-commit-msg.cjs”
},
“lint-staged”: {
“src/**/*.{js,jsx,vue}”: [
“eslint”
]
},
其中 - giHook是设置哪些钩子执行哪些命令,pre-commit 在commit之前 执行eslint的规则校验 commit-msg 主要是在输入commit信息的时候对信息校验
- Lint-staged pre-commit的时候执行该命令 我们这里只使用eslint进行语法校验,如果会在命令行中输出,并且进行退出当前的命令,
社区的方案- vue 只对文件进行prettier的格式化
“lint-staged”: {
“.js": [
“prettier --write”
],
".ts”: [
“prettier --parser=typescript --write”
]
}, - Pinia 与vue保持一直
“lint-staged”: {
“.js": [
“prettier --write”
],
".ts?(x)”: [
“prettier --parser=typescript --write”
]
} - Element-ui 使用eslint进行校验 不修复
“lint”: "eslint src//* test//* packages//* build//* --quiet - Element-plus 使用eslint 尝试 修复
“lint-staged”: {
“*.{vue,js,ts,jsx,tsx,md,json}”: “eslint --fix”
} - Antd 使用eslint 尝试修复
“lint-staged”: {
".{vue,js,ts,jsx,tsx,md,json}": “eslint --fix”
}
我们的方案
目前只是使用eslint进行规则规范的校验,不进行修复
4.commit-msg的方案
目前是采用vue的官方的配置(vue的也是参考angular的提交信息做了部分修改)只对前缀进行校验,前缀为wip|release|feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build+ : 即可,考虑到业务提交信息可能比较多,所以这里变更为300字符以内
/ eslint-disable */
const chalk = require(‘chalk’)
- vue 只对文件进行prettier的格式化
const msgPath = process.env.GIT_PARAMS
const msg = require(‘fs’).readFileSync(msgPath, ‘utf-8’).trim()
const commitRE =
/^(revert: )?(wip|release|feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)((.+))?: .{1,300}/
if (!commitRE.test(msg)) {
console.log()
console.error(
${chalk.bgRed.white(' ERROR ')} ${chalk.red(
invalid commit message format. )}\n\n
+
chalk.red(
Proper commit message format is required for automated changelog generation. Examples:\n\n
) +
${chalk.green(
feat(compiler): add ‘comments’ option)}\n
+
${chalk.green(
fix(v-model): handle events on blur (close #28) )}\n\n
+
chalk.red( See .github/COMMIT_CONVENTION.md for more details.\n
)
)
process.exit(1)
}