Leveling Up Code Quality with AI Tools

by Preston Landers
Senior Software Engineer
Journyx

A Subtle Naming Inconsistency

During a recent code review, I noticed a minor issue in our Vue.js components: internal component names that didn’t match their corresponding filenames. A file named ApiKeyDetailsModal.vue had its component defined as ApiKeySummaryDialog — a small discrepancy that could lead to debugging headaches down the line.

While this might seem minor, consistent naming is crucial for maintainable code. Small details like this that can save hours of confusion in the future.

Journyx’s Code Quality Toolkit

At Journyx, we take code quality seriously. Our development workflow includes:

• Python and JavaScript linters to catch potential issues
• Automatic code formatters to maintain consistent style
• Continuous integration checks and tests – every time a developer pushes code it runs a series of tests to ensure nothing is broken
• Git hooks to prevent problematic code from being committed

For those unfamiliar with the terminology, linters are tools that analyze code to automatically find programming errors, bugs, and stylistic issues. You can think of them as automated code reviewers that catch certain types of problems before humans even need to look at the code.

Our JavaScript and Vue.js linting is handled by ESLint, a highly configurable tool that can be extended with custom rules. These tools help us maintain a clean, consistent codebase. But sometimes, you need something more specialized.

The ESLint Challenge

In Vue.js, there’s an unwritten best practice of matching a component’s internal name with its filename. Our existing tools didn’t address this specific requirement. I’d previously created a demonstration ESLint rule definition as a proof of concept, but transforming it into a robust, production-ready solution for this particular problem seemed especially challenging, given that I’m not intimately familiar with customizing ESLint. Here’s that rule:

Transforming my simple demonstration into a rule that could properly parse Vue.js component files, extract component names, compare them to filenames, and handle various edge cases seemed daunting. This is where AI assistance came into play.

Collaborating with AI

I’ve been using GitHub Copilot for everyday coding tasks, but having recently experimented with the newer Claude 3.7 Sonnet model for more complex problems, I decided to try it for this particular challenge.

I started by providing Claude with a description of my problem and showing it my demonstration ESLint rule. Within minutes, Claude produced a basic implementation that looked promising but wasn’t quite there yet.

To cross-check my initial results, I also consulted GitHub Copilot for a second opinion. This approach yielded valuable insights:

• Improved cross-platform path handling
• Better handling of edge cases
• Performance optimizations

Here’s an abbreviated glimpse of the final rule’s core functionality:

Results and Insights

The entire process took approximately 45 minutes. When we ran the new rule against our source code, it immediately identified five instances of mismatched component names. The rule even supports ESLint’s auto-fix capability, allowing for automatic corrections.

What would have taken me hours of research, trial, and error was accomplished in minutes through AI collaboration.

The resulting code was well-structured, thoroughly commented, and handled edge cases I likely wouldn’t have considered initially.

AI as a Development Collaborator

This experience highlighted the potential of AI coding tools. Working with tools like Claude and GitHub Copilot felt like collaborating with a knowledgeable colleague who:

• Has broad and deep technical knowledge
• Doesn’t mind explaining concepts from first principles
• Will patiently iterate on solutions based on feedback
• Is available whenever you need assistance

Unlike a human programmer, AI is consistently available, relatively objective, and doesn’t mind if you completely reject its approach and go in another direction. This creates a uniquely productive collaborative environment.

However, it’s essential to keep human review in the loop. AI tools are incredibly powerful, but they can and do sometimes produce incorrect or suboptimal code, or simply fail to understand the bigger picture. It’s our policy at Journyx to always closely review, test, and understand AI-generated code before merging it into our development branch. For that matter, not every software engineering task is immediately amenable to AI assistance, especially given the limited context windows available in most current models.

This means that (at least, as of this writing) most commonly available AI coding tools are unable to “see” an entire large project or application source at once, or have much of a concept of the bigger picture or fine details. Things are rapidly changing in this space, but for now, it’s best to think of AI as a powerful assistant rather than a replacement for human developers.

Practical Tips for AI-Assisted Development

Based on this and other experiences integrating AI into our development workflow, here are some practical takeaways:

1. Use AI for scaffolding specialized code: Custom linting rules, complex regex patterns, and boilerplate reduction are perfect AI use cases.
2. Combine multiple AI tools: Different models have different strengths. Using Claude for creative problem-solving and Copilot for code review created a powerful combination.
3. Provide clear examples: Showing Claude my existing rule dramatically improved the quality of its solution compared to just describing what I wanted.
4. Iterate with feedback: Don’t expect perfect results immediately. Treat AI assistance as a conversation, providing feedback to improve successive iterations.
5. Verify and understand the code: While the solution worked well, I made sure to understand how it worked before implementing it in our codebase.

Conclusion

For our team at Journyx, AI tools have become an essential productivity enhancement. They’re particularly valuable for creating specialized tools like custom linting rules — tasks that are important but don’t warrant becoming an expert in the underlying systems.

The most exciting aspect isn’t just the time saved, but how these tools transform tedious tasks into engaging collaborative experiences. Building this ESLint rule was genuinely enjoyable, and the resulting improvement to our codebase will help prevent similar issues in the future.

As AI coding assistants continue improving, I expect we’ll find even more creative ways to integrate them into our development workflows, allowing us to focus more on solving unique business problems and less on technical implementation details.

Have you used AI to improve your development process? We’d love to hear about your experiences on our LinkedIn page.