vscode用户区域配置

1.为什么
主要是为了一个项目在每个人的电脑中都能使用同一个配置，这样大家在vscode中进行编辑代码的时候，能保持格式的一致，大家使用的格式化文件的插件等配置也能保持一致,所以增加的
2.怎么进行配置
在项目中增加.vscode/setting.json即可,考虑到首次,请强制添加文件git add -f .vscode/setting.json到git的追踪中
3.优先级
项目中的.vscode/setting.json>用户配置的setting

4.需要安装的vscode插件

1. prettier(必须)
2. vetur(必须)
3. eslint(必须)
4. editorconfig for vscode(可不安装)
5. 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.支持的文件

1. .eslintrc.js > cjs > yaml >yml > json > package.json
2. 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的环境 使用$符号的时候会进行报错
支持的环境列表如下

1. browser - browser global variables.
2. node - Node.js global variables and Node.js scoping.
3. commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
4. shared-node-browser - Globals common to both Node.js and Browser.
5. es6 - enable all ECMAScript 6 features except for modules (this automatically sets the ecmaVersion parser option to 6).
6. es2016 - adds all ECMAScript 2016 globals and automatically sets the ecmaVersion parser option to 7.
7. es2017 - adds all ECMAScript 2017 globals and automatically sets the ecmaVersion parser option to 8.
8. es2018 - adds all ECMAScript 2018 globals and automatically sets the ecmaVersion parser option to 9.
9. es2019 - adds all ECMAScript 2019 globals and automatically sets the ecmaVersion parser option to 10.
10. es2020 - adds all ECMAScript 2020 globals and automatically sets the ecmaVersion parser option to 11.
11. es2021 - adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
12. es2022 - adds all ECMAScript 2022 globals and automatically sets the ecmaVersion parser option to 13.
13. worker - web workers global variables.
14. amd - defines require() and define() as global variables as per the amd spec.
15. mocha - adds all of the Mocha testing global variables.
16. jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
17. jest - Jest global variables.
18. phantomjs - PhantomJS global variables.
19. protractor - Protractor global variables.
20. qunit - QUnit global variables.
21. jquery - jQuery global variables.
22. prototypejs - Prototype.js global variables.
23. shelljs - ShellJS global variables.
24. meteor - Meteor global variables.
25. mongo - MongoDB global variables.
26. applescript - AppleScript global variables.
27. nashorn - Java 8 Nashorn global variables.
28. serviceworker - Service Worker global variables.
29. atomtest - Atom test helper globals.
30. embertest - Ember test helper globals.
31. webextensions - WebExtensions globals.
32. greasemonkey - GreaseMonkey globals.
    2.globals
    在使用部分全局变量的时候,如果是在env环境中不支持 globals中未配置的全局变量 也会引起eslint的报错(报错原因是’no-undef’ 导致的)

3.settings
主要是为了我们在jsconfig中设置的路径别名,eslint无法识别而导致的报错

4.extends
这里主要是eslint使用了哪些扩展

1. airbnb 我们使用了 airbnb的基础规范
2. plugin:vue/strongly-recommended eslint-vue中强烈推荐的规范项目
3. plugin:prettier/recommended
4. 配合prettier进行使用,
5. 修改了prettier中跟eslint规则冲突的地方
6. eslint的报错会标识是prettier的格式问题
7. 需要在rules中进行配置才会进行报错,
8. 会读取项目中的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.方案
目前社区中流行两种方案

1. git原生hooks vue2 pinia
2. husky – vuetify,angular, ant-design 有点简化部分githook的操作
3. Yorkie fork自husky 做了一些变更(社区中用的非常少)
4. Simple-git-hook(之前是simple-pre-commit) ---- vue/core
   2.采用方案
   因为我们只需要做两点
5. commit之前对提交的文件进行格式校验
6. 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”
   ]
   },
   其中
7. giHook是设置哪些钩子执行哪些命令,pre-commit 在commit之前 执行eslint的规则校验 commit-msg 主要是在输入commit信息的时候对信息校验
8. Lint-staged pre-commit的时候执行该命令 我们这里只使用eslint进行语法校验,如果会在命令行中输出,并且进行退出当前的命令,
   社区的方案
   1. vue 只对文件进行prettier的格式化
      “lint-staged”: {
      “.js": [
      “prettier --write”
      ],
      ".ts”: [
      “prettier --parser=typescript --write”
      ]
      },
   2. Pinia 与vue保持一直
      “lint-staged”: {
      “.js": [
      “prettier --write”
      ],
      ".ts?(x)”: [
      “prettier --parser=typescript --write”
      ]
      }
   3. Element-ui 使用eslint进行校验 不修复
      “lint”: "eslint src//* test//* packages//* build//* --quiet
   4. Element-plus 使用eslint 尝试 修复
      “lint-staged”: {
      “*.{vue,js,ts,jsx,tsx,md,json}”: “eslint --fix”
      }
   5. 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’)

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)
}