到底建手机网站还是电脑网站,编辑目录中的字体wordpress,丹阳网站设计公司,新颖的网站策划前提
之前开自己的GitHub项目#xff0c;想着不是团队项目#xff0c;偷懒没有配置eslint#xff0c;后面发现还是不行。eslint的存在可以帮助我们规范代码格式#xff0c;同时 ctrl s保存立即调整代码格式是真的很爽。
除此之外#xff0c;团队使用eslint也是好处颇多…前提
之前开自己的GitHub项目想着不是团队项目偷懒没有配置eslint后面发现还是不行。eslint的存在可以帮助我们规范代码格式同时 ctrl s保存立即调整代码格式是真的很爽。
除此之外团队使用eslint也是好处颇多因为如果团队内每一个同事的代码规范风格都不一样协同开发的时候容易出现大量因为代码格式调整而引起的代码变动这样让我们追踪修改代码的难度又上升了一个level因而配置eslint是非常有必要的。
今天教大家配一下Next.jstailwind的代码规范顺便也是方便自己查找。
项目配置参考位置
goldfish-Ai/.eslintrc.json at pack-autoprefixedfail · blueyuyu/goldfish-Ai · GitHub
配置 初始化 ESLint
如果在配置Next项目的时候没有选择eslint就需要进行如下步骤
npx eslint --init
How would you like to use ESLint?: To check syntax and find problems What type of modules does your project use?: JavaScript modules (import/export) Which framework does your project use?: React Does your project use TypeScript?: Yes or No Where does your code run?: Browser, Node How would you like to define a style for your project?: Use a popular style guide Which style guide do you want to follow?: Airbnb: https://github.com/airbnb/javascript What format do you want your config file to be in?: JSON
进行配置这样就会生成一个基本的 .eslintrc.json 文件。
安装ts依赖
项目中有用到ts;
npm install typescript-eslint/parser typescript-eslint/eslint-plugin --save-dev
配置 .eslintrc.json
可以照着我的配置配 {extends: [next/core-web-vitals,plugin:typescript-eslint/recommended,plugin:prettier/recommended],parser: typescript-eslint/parser,plugins: [typescript-eslint],settings: {import/resolver: {node: {extensions: [.js, .jsx, .ts, .tsx]}}},rules: {// 自定义规则react/react-in-jsx-scope: off,linebreak-style: [error, unix],// 强制使用 LF 换行符react/jsx-filename-extension: [1, { extensions: [.js, .jsx, .ts, .tsx] }],import/extensions: [error,ignorePackages,{js: never,jsx: never,ts: never,tsx: never}],no-unused-vars: off,typescript-eslint/no-unused-vars: [error],import/prefer-default-export: off,max-len: [warn, { code: 100 }],react/jsx-max-props-per-line: [error, { maximum: 1 }],// 设置为 error 并指定 maximum: 1确保每个属性独占一行。react/jsx-indent-props: [error, 2]// 规则确保属性缩进为两个空格。}
}安装 Prettier
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
配置 .prettierrc
创建一个 .prettierrc 文件来配置 Prettier。
{semi: false,singleQuote: false,printWidth: 100,useTabs: false,trailingComma: all,bracketSpacing: true,arrowParens: always,proseWrap: preserve,endOfLine: lf
}
测试
这样就配置完毕了ctrls保存代码自动调整格式对照一下看看格式是不是自己想要的不是的话看着文档慢慢调整。
配置 VSCode 设置
使用快捷键 ctrl , 输入setting找到在setting.json里面编写。对项目进行配置。
settings.json
{// 启用保存时自动格式化editor.formatOnSave: true,// 设置默认格式化工具为 Prettiereditor.defaultFormatter: esbenp.prettier-vscode,// 确保 ESLint 自动修复eslint.autoFixOnSave: true,// 确保 ESLint 也参与格式化eslint.validate: [javascript,javascriptreact,typescript,typescriptreact],// 忽略特定文件夹的格式化files.exclude: {**/.git: true,**/node_modules: true},}
小结
曾经的我不知规范化的好处项目到我手上就变了模样历史记录更是难以追踪。今日起我痛定思痛决心每一次都把规范设置好。也希望大家以我为戒不要再犯下此类低级错误
顺便问一下谁能关注一下我吗前端小趴菜在努力成长带你一起进步
